title: Div scroll with fixed steps like the select element
body: <p>I'm trying to make a div to mimick the select-element in some ways but that also allow me to style and layout each item/option in any way I like.</p>
  
  <p>One behaviour I'm trying to copy is the scrolling which is in fixed steps with the select-element.</p>
  
  <p>How can I get this behaviour for a div-element (with any number of child-divs)?</p>
  
  <p>(The child-div height is the same for every element)</p>
  
  <p>The scrollbar should never be able to be put in a non multiple position of the child-div height.</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>This is the solution I came up with:</p>
  
  <pre><code>var scroller;
  var itemHeight = 300;
  function init(){
   scroller = document.getElementById('scrollDiv');
   scroller.onscroll = fixedScroll;
   scroller.onmousewheel = mousewheel;
   scroller.onkeydown = keydown;
  }
  function fixedScroll(e){
      e.target.scrollTop = Math.round(e.target.scrollTop / itemHeight) * itemHeight;
  }
  function mousewheel(e){
      e.preventDefault();
      var sign = e.wheelDelta &gt; 0 ? -1 : 1;
      e.target.scrollTop += sign * itemHeight;
  }
  function keydown(e){
      var sign = 0;
      if (e.keyCode === 40) sign = 1;
      else if (e.keyCode === 38) sign = -1;
      e.target.scrollTop += sign * itemHeight;
  }
  init();
  </code></pre>
  
  <p>Fiddle:</p>
  
  <p><a href="http://jsfiddle.net/4tj6r/61/" rel="nofollow">http://jsfiddle.net/4tj6r/61/</a></p>