JavaScript: The Definitive Guide, 6th Edition

Mousewheel Events

All modern browsers support mouse wheels and fire events when the user rotates the mousewheel. Browsers often use the mousewheel to scroll the document or to zoom in or out, but you can cancel the mousewheel event to prevent those default actions.

There are a number of interoperability issues that affect mousewheel events, but it is possible to write code that works on all platforms. At the time of this writing, all browsers but Firefox support an event named “mousewheel”. Firefox uses “DOMMouseScroll” instead. And the DOM Level 3 Events draft proposes an event named “wheel” instead of “mousewheel”. In addition to the differences in event names, the objects passed to these various events use different property names to specify the amount of wheel rotation that occurred. Finally, note that there are fundamental hardware distinctions between mouse wheels as well. Some allow 1-dimensional rotation forward and back and some (particularly on Macs) also allow rotation left and right (on these mice the “wheel” is really a trackball). The DOM Level 3 standard even includes support for 3-dimensional mouse “wheels” that can report clockwise or counter-clockwise rotation in addition to forward/back and left/right.

The event object passed to a “mousewheel” handler has a wheelDelta property that specifies how far the user turned the wheel. One mousewheel “click” away from the user is generally a delta of 120 and one click toward the user is -120. In Safari and Chrome, to support ...