Normalizing mousewheel speed across browsers

by

Edit September 2014

Given that:

  • Different versions of the same browser on OS X have yielded different values in the past, and may do so in the future, and that
  • Using the trackpad on OS X yields very similar effects to using a mouse wheel, yet gives very different event values, and yet the device difference cannot be detected by JS

…I can only recommend using this simple, sign-based-counting code:

var handleScroll = function(evt){
  if (!evt) evt = event;
  var direction = (evt.detail<0 || evt.wheelDelta>0) ? 1 : -1;
  // Use the value as you will
};
someEl.addEventListener('DOMMouseScroll',handleScroll,false); // for Firefox
someEl.addEventListener('mousewheel',    handleScroll,false); // for everyone else

Original attempt to be correct follows.

Here is my first attempt at a script to normalize the values. It has two flaws on OS X: Firefox on OS X will produce values 1/3 what they should be, and Chrome on OS X will produce values 1/40 what they should be.

// Returns +1 for a single wheel roll 'up', -1 for a single roll 'down'
var wheelDistance = function(evt){
  if (!evt) evt = event;
  var w=evt.wheelDelta, d=evt.detail;
  if (d){
    if (w) return w/d/40*d>0?1:-1; // Opera
    else return -d/3;              // Firefox;         TODO: do not /3 for OS X
  } else return w/120;             // IE/Safari/Chrome TODO: /3 for Chrome OS X
};

You can test out this code on your own browser here: http://phrogz.net/JS/wheeldelta.html

Suggestions for detecting and improving the behavior on Firefox and Chrome on OS X are welcome.

Edit: One suggestion from @Tom is to simply count each event call as a single move, using the sign of the distance to adjust it. This will not give great results under smooth/accelerated scrolling on OS X, nor handle perfectly cases when the mouse wheel is moved very fast (e.g. wheelDelta is 240), but these happen infrequently. This code is now the recommended technique shown at the top of this answer, for the reasons described there.

More Related Contents:

  1. Get mouse wheel events in jQuery?
  2. Mousewheel event in modern browsers
  3. How can I differentiate a manual scroll (via mousewheel/scrollbar) from a Javascript/jQuery scroll?
  4. Javascript: Capture mouse wheel event and do not scroll the page?
  5. How to block "adblock"
  6. Sorting array of object based on range of Numbers of String [closed]
  7. expected ‘;’ and instead saw ‘=’ [closed]
  8. How to simulate a click with JavaScript?
  9. AngularJS routing without the hash ‘#’
  10. Show/hide ‘div’ using JavaScript
  11. Detect URLs in text with JavaScript
  12. AngularJS passing data to $http.get request
  13. What does the “|” (single pipe) do in JavaScript?
  14. Angular IE Caching issue for $http
  15. How can I set focus on an element in an HTML form using JavaScript?
  16. How do you execute a dynamically loaded JavaScript block?
  17. Filtering an array with a function that returns a promise
  18. How to make script execution wait until jquery is loaded
  19. Any event triggered on autocomplete?
  20. Rails flash notice via ajax
  21. What tag in HTML should I use without special meaning, only to carry meta data?
  22. Detect if user clicks inside a circle
  23. Backbone: event lost in re-render
  24. How to deterministically verify that a JSON object hasn’t been modified?
  25. Iframe.readyState does not work in chrome
  26. What is the difference between Observable and a Subject in rxjs?
  27. How to get data passed from a form in Express (Node.js)
  28. Why doesn’t this.evaluate return DOM nodes correctly?
  29. jQuery addClass onClick
  30. How to apply background-color to a selected option?

Leave a Comment