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 fires when the browser actually does scroll, and will not fire for a DOM element styled to have overflow hidden.

Google maps' scroll to zoom is an example of the type of behavior I'm looking for.

Does anyone have any idea how to accomplish something like this?

Thanks.

It works in Firefox, and Chrome. **Live demo:** http://jsfiddle.net/chtNP/1/ — Šime Vidas, Nov 08 '12 at 01:47
This won't work too well in IE or Opera, depending on the version (see http://www.adomas.org/javascript-mouse-wheel/) — Kelvin, Nov 08 '12 at 01:49
@ŠimeVidas everything a quick google search for "DOMMouseScroll browser support" throws up suggests otherwise... There's certainly no support for it in older versions of Firefox, Opera, IE7, etc. — Kelvin, Nov 08 '12 at 01:57
@KelvinMackay I had updated my demo to include the `'mousewheel'` event. — Šime Vidas, Nov 08 '12 at 02:05

score 10 · Accepted Answer · answered Nov 08 '12 at 01:51

10

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.)

answered Nov 08 '12 at 01:51

Šime Vidas

182,163
62
281
385

Perfect, thank you, I didn't know about that event and must have missed it in my googling. – Zev Nov 08 '12 at 01:52
Is it possible to determine if the user is scrolling up or down aswell? – Robin Castlin Sep 12 '13 at 09:06
@RobinCastlin Yes. The scroll event provides a property for that. There are different implementations of this though so you'd have to write a bit of if-else code to get the value across browsers. – Šime Vidas Sep 12 '13 at 18:33
Note both the `DOMMouseScroll` and the [`mousewheel`](https://developer.mozilla.org/en-US/docs/Web/Events/mousewheel) event have been deprecated. The standardised event name is `wheel`. – billc.cn Dec 07 '17 at 10:18

Rolf · Answer 2 · 2013-12-09T18:10:16.890

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).

score 0 · Answer 3 · answered Nov 08 '12 at 01:47

0

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...

answered Nov 08 '12 at 01:47

Kelvin

5,227
1
23
36

It takes much (much!) more time to implement without jQuery, if you have to read the docs (like I did). But I would not call it a world of pain, especially if you just copy paste my solution. – Rolf Dec 09 '13 at 17:48

Capturing Scroll Wheel Events

3 Answers3

Linked