Use jQuery to check mousewheel event without scrollbar

Question

How to check mousewheel movement without scrollbar?

$(document).mousewheel(function() {
     clicker.html("a7a");
});

Aaron · Accepted Answer · 2015-06-27T12:55:24.630

32

I highly recommend you use this jQuery plugin: PLUGIN

Without a plugin, try this example: EXAMPLE

HTML:

<div id='foo' style='height:300px; width:300px; background-color:red'></div>

Javascript:

$('#foo').bind('mousewheel', function(e) {
    if(e.originalEvent.wheelDelta / 120 > 0) {
        alert('up');
    } else {
        alert('down');
    }
});

There is no scrollbar on the div but the wheel event is detected.

edited Jun 27 '15 at 12:55

answered Sep 18 '13 at 19:03

Aaron

3,195
5
31
49

2

So it seems that `wheelDelta` comes out to either `120` or `-120` so division normalizes this value - but does anyone know why the browser chooses 120 as the value? – Gershom Maes Oct 06 '15 at 06:29
I would recommend the use of the 2nd argument of event handler function - `delta`: `$('#el').on('mousewheel', function(e, delta) { if(delta > 0) { /*up*/ } else { /*down*/ }})`. See [this answer](http://stackoverflow.com/a/43468489/1245149). – Mojo Apr 18 '17 at 09:43
So what is the puprose of the jquery-mousewheel plugin if the event can be handled without it? – Roman Sep 30 '20 at 02:25

score 9 · Answer 2 · answered Feb 28 '15 at 08:57

9

use this code

$('#foo').bind('mousewheel DOMMouseScroll', function (event) {           
     if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
          //up
     }
     else {
          //down
     }
});

answered Feb 28 '15 at 08:57

Behnam

6,244
1
39
36

1

This answer would be much better if it included more explanation as to how it works, especially as there is already an upvoted answer present. – Heretic Monkey Feb 28 '15 at 21:14
The example works fine, but the [documentation](https://developer.mozilla.org/en-US/docs/Web/Events/mousewheel) says to use the `'wheel'` event instead of `'mousewheel'`. – Giancarlo Sportelli Nov 20 '16 at 17:28

score 7 · Answer 3 · answered Sep 25 '13 at 16:34

And, if you don't want to use any plugin at all (IE8, Chrome, Firefox, Safari, Opera...), just do this:

if (document.addEventListener) {
    document.addEventListener("mousewheel", MouseWheelHandler(), false);
    document.addEventListener("DOMMouseScroll", MouseWheelHandler(), false);
} else {
    sq.attachEvent("onmousewheel", MouseWheelHandler());
}


function MouseWheelHandler() {
    return function (e) {
        // cross-browser wheel delta
        var e = window.event || e;
        var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));

        //scrolling down?
        if (delta < 0) {
            alert("Down");
        }

        //scrolling up?
        else {
             alert("Up");
        }
        return false;
    }
}

Living example: http://jsfiddle.net/CvCc6/1/

score 2 · Answer 4 · answered Jun 16 '17 at 18:38

This is just an update to @Aaron's answer, using the new "wheel" event, described here: https://developer.mozilla.org/en-US/docs/Web/Events/wheel

$('#foo').on('wheel', function(e){
    if(e.originalEvent.deltaY < 0) {
        console.log('scrolling up !');
    } else{
        console.log('scrolling down !');
    }
});

You can also use deltaX to see horizontal scroll, or deltaZ if you've got some crazy 3D thing going on.

Use jQuery to check mousewheel event without scrollbar

4 Answers4

Linked