Get Mouse Wheel Events in Jquery

Get mouse wheel events in jQuery?

There's a plugin that detects up/down mouse wheel and velocity over a region.

Use jQuery to check mousewheel event without scrollbar

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.

Get direction for mousewheel JQuery event handler

The properties wheelDelta and detail are what you need, as below:

if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
    // Scroll up
}
else {
    // Scroll down
}

I've updated your jsfiddle with this code.

Also, note that the mousewheel event is deprecated and you should use wheel instead.

Detecting jQuery scroll event from inside mousewheel event

Use event.target to detect if you're inside the scrolling panel, if true, then use .scrollTop() with the heights of the scrolling panels, along with the direction of scroll to detect if you're at the bottom or the top.

Here's a JSFiddle to demonstrate: https://jsfiddle.net/g6e4fj97/2/

Catch mousewheel up or down with jQuery/JS, without actually scrolling

I rarely promote plugins but this one is just excellent (and relatively small in size) :

https://plugins.jquery.com/mousewheel/

It'll allow to do something like this :

$(window).mousewheel(function(turn, delta) {

  if (delta == 1) // going up
  else // going down

  // all kinds of code

  return false;
});

http://codepen.io/anon/pen/YPmjym?editors=001

---

Update - at this point the mousewheel plugin could be replaced with the wheel event if legacy browsers need not be supported:

$(window).on('wheel', function(e) {

  var delta = e.originalEvent.deltaY;

  if (delta > 0) // going down
  else // going up

  return false;
});

How to detect mouse scroll down in jQuery?

The mousewheel event returns a delta value, signifying if the mouse wheel was scrolled up or down.

Here's a very good site explaining how to handle mousewheel events in all browsers (Firefox seems to do it a little differently than others):

http://www.sitepoint.com/html5-javascript-mouse-wheel/

There's also a jQuery plugin:

https://github.com/brandonaaron/jquery-mousewheel

jquery mousewheel: detecting when the wheel stops?

There's no "stop" event here really - you get an event when you do scroll, so every time a mousewheel event happens the event is triggered...when there's nothing you'll get no events and your handler won't be firing.

You ca however detect when the user hasn't used it in say 250ms, like this:

$("#myElem").mousewheel(function() {
  clearTimeout($.data(this, 'timer'));
  $.data(this, 'timer', setTimeout(function() {
     alert("Haven't scrolled in 250ms!");
     //do something
  }, 250));
});

You can give it a try here, all we're doing is storing the timeout on each use in using $.data(), if you use it again before that time runs out, it gets cleared...if not then whatever code you wanted to run fires, the user has "finished" using their mousewheel for whatever period of time you're testing for.

On CTRL+MOUSEWHEEL event

Fiddle, In order for it to work you have to click in the result box first before trying.

$(window).bind('mousewheel DOMMouseScroll', function(event) 
{
    if(event.ctrlKey == true)
    {
        event.preventDefault();
        if(event.originalEvent.detail > 0) {
             console.log('Down');
         }else {
             console.log('Up');
         }
    }
});

---

Related Topics