Capturing Scroll Wheel Events

Question

I want to capture an event when a user scrolls their scroll wheel in a situation where the page does not scroll/is not scrollable. However, the standard JS scroll event only

Answer 1

At this time, Firefox define DOMMouseScroll and wheel events. Chrome, Opera and IE (latest, again!) define mousewheel.

This is how I did it:

if(window.onwheel !== undefined) {
    window.addEventListener('wheel', onMouseWheel)
} else if(window.onmousewheel !== undefined) {
    window.addEventListener('mousewheel', onMouseWheel)
} else {
    // unsupported browser
}

Note that addEventListener support in older IE versions needs a polyfill. Alternatively you can use the old window.mousewheel = function(){} or whatever method.

As you can see, the event listener is attached to the window object. You can't attach it to elements, in a cross-browser fashion. You can use the event object target property to see where it was triggered, and do a filter on that basis.

PS: One more cross-browser consideration: In IE, you have to use the "wheelDelta" property (and invert it's sign!) inside the event object when processing it in the callback function ("onMouseWheel"). Other browsers will populate "deltaY" (or "deltaX" for horizontal scrolling).

Answer 2

With jQuery, you can use this plugin, or any number of similar ones that do the same thing.

If jQuery or a similar framework isn't an option, it's possible but prepare yourself for a world of pain when you want to get it working in more than one browser...

Answer 3

You can capture the mouse-wheel event just fine:

$( '#yourElement' ).on( 'DOMMouseScroll mousewheel', function () {
    ...
});

Live demo: http://jsfiddle.net/chtNP/1/

(I'm using jQuery to bind the event handler, but it works regardless of which API you use, of course.)