JAVASCRIPT : Mouse wheel turning

Question

I have a page without scroll.

How i can set alert(for example) when mouse wheel turns?

For example when mouse wheel turns on a element:

$(document).ready(function(){
  $('#div').mouseWheel(function(){
    alert('test');
  });
});

Answer 1

Ok if you need the mousewheel you should consider the jquery-mousewheel plugin. There you can bind on the 'mousewheel' event.

The event also comes with deltaX and deltaY information, from which you can deduce whether the mousewheel scrolls up (deltaY > 0) or scrolls down (deltaY < 0).

See it in action with the mousewheel up/down detection

HTML:

<div id="mydiv" style="background: green; width: 400px; height: 400px;">
    a div
</div>

JAVASCRIPT:

$('#mydiv').hover(function() {
   $(this).data('hover',1); // mouse is over the div
}, function(){
   $(this).data('hover',0); // mouse is no longer over the div
});

$(document).mousewheel(function(event, delta, deltaX, deltaY) {
    if($('#mydiv').data('hover') == 1 && $(document).attr('alert-on') != 1) {
        $(document).attr('alert-on', 1) 
        if(deltaY > 0) {
            alert('wheel scrolls up');
        } else {
            alert('wheel scrolls down');
        }
        $(document).attr('alert-on', 0) 
    }
});

What it does is it sets a flag on your div when the mouse is over, once a mousewheel event is captured it checks whether you are over the <div> with the mouse, when yes it shows an alert box.

It also sets a flag on the document that the alert box is shown, because the mousewheel event is emitted every time you turn your scrolling wheel a little bit which would result in many alert boxes stacked upon each other.

Answer 2

You can detect scrolling, but you cannot detect whether it was via the mouse wheel, the scrollbar, finger-pad, touchscreen or some other method.

All you get in the browser is a scroll event.

I guess that isn't what you wanted to hear. Sorry.