title: Normalizing mousewheel speed across browsers
body: <p>For <a href="https://stackoverflow.com/q/5189968/405017">a different question</a> I composed <a href="https://stackoverflow.com/questions/5189968/zoom-to-cursor-calculations/5526721#5526721">this answer</a>, including <a href="http://phrogz.net/tmp/canvas_zoom_to_cursor.html" rel="noreferrer">this sample code</a>.</p>
  
  <p>In that code I use the mouse wheel to zoom in/out of an HTML5 Canvas. I found some code that normalizes speed differences between Chrome and Firefox. However, the zoom handling in Safari is much, much faster than in either of those.</p>
  
  <p>Here's the code I currently have:</p>
  
  <pre><code>var handleScroll = function(e){
    var delta = e.wheelDelta ? e.wheelDelta/40 : e.detail ? -e.detail/3 : 0;
    if (delta) ...
    return e.preventDefault() &amp;&amp; false;
  };
  canvas.addEventListener('DOMMouseScroll',handleScroll,false); // For Firefox
  canvas.addEventListener('mousewheel',handleScroll,false);     // Everyone else
  </code></pre>
  
  <p>What code can I use to get the same 'delta' value for the same amount of mouse wheel rolling across Chrome v10/11, Firefox v4, Safari v5, Opera v11 and IE9?</p>
  
  <p><em><a href="https://stackoverflow.com/questions/4338214/javascript-scrollbar-class-and-mousewheel-speed-in-different-browsers">This question</a> is related, but has no good answer.</em></p>
  
  <p><strong>Edit</strong>: Further investigation shows that one scroll event 'up' is:</p>
  
  <pre>
                    | evt.wheelDelta | evt.detail
  ------------------+----------------+------------
    Safari v5/Win7  |       120      |      0
    Safari v5/OS X  |       120      |      0
    Safari v7/OS X  |        12      |      0
   Chrome v11/Win7  |       120      |      0
   Chrome v37/Win7  |       120      |      0
   Chrome v11/OS X  |         3 (!)  |      0      (possibly wrong)
   Chrome v37/OS X  |       120      |      0
          IE9/Win7  |       120      |  undefined
    Opera v11/OS X  |        40      |     -1
    Opera v24/OS X  |       120      |      0
    Opera v11/Win7  |       120      |     -3
   Firefox v4/Win7  |    undefined   |     -3
   Firefox v4/OS X  |    undefined   |     -1
  Firefox v30/OS X  |    undefined   |     -1
  </pre>
  
  <p>Further, using the MacBook trackpad on OS X gives different results even when moving slowly:</p>
  
  <ul>
  <li>On Safari and Chrome, the <code>wheelDelta</code> is a value of 3 instead of 120 for mouse wheel.</li>
  <li>On Firefox the <code>detail</code> is usually <code>2</code>, sometimes <code>1</code>, but when scrolling very slowly <strong>NO EVENT HANDLER FIRES AT ALL</strong>.</li>
  </ul>
  
  <p>So the question is:</p>
  
  <p>What is the best way to differentiate this behavior (ideally without any user agent or OS sniffing)?</p>