Get mouse wheel events in jQuery?

Javascript Problem Overview

Is there a way to get the mouse wheel events (not talking about scroll events) in jQuery?

Javascript Solutions

Solution 1 - Javascript

$(document).ready(function(){
    $('#foo').bind('mousewheel', function(e){
        if(e.originalEvent.wheelDelta /120 > 0) {
            console.log('scrolling up !');
        }
        else{
            console.log('scrolling down !');
        }
    });
});

Solution 2 - Javascript

Binding to both mousewheel and DOMMouseScroll ended up working really well for me:

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

This method is working in IE9+, Chrome 33, and Firefox 27.

Edit - Mar 2016

I decided to revisit this issue since it's been a while. The MDN page for the scroll event has a great way of retrieving the scroll position that makes use of requestAnimationFrame, which is highly preferable to my previous detection method. I modified their code to provide better compatibility in addition to scroll direction and position:

(function() {
  var supportOffset = window.pageYOffset !== undefined,
    lastKnownPos = 0,
    ticking = false,
    scrollDir,
    currYPos;

  function doSomething(scrollPos, scrollDir) {
    // Your code goes here...
    console.log('scroll pos: ' + scrollPos + ' | scroll dir: ' + scrollDir);
  }

  window.addEventListener('wheel', function(e) {
    currYPos = supportOffset ? window.pageYOffset : document.body.scrollTop;
    scrollDir = lastKnownPos > currYPos ? 'up' : 'down';
    lastKnownPos = currYPos;

    if (!ticking) {
      window.requestAnimationFrame(function() {
        doSomething(lastKnownPos, scrollDir);
        ticking = false;
      });
    }
    ticking = true;
  });
})();

See the Pen http://codepen.io/blindside85/pen/bpEMEN/">Vanilla JS Scroll Tracking by Jesse Dupuy (http://codepen.io/blindside85">@blindside85</a>;) on http://codepen.io">CodePen</a>.</p>

This code is currently working in Chrome v50, Firefox v44, Safari v9, and IE9+

References:

Solution 3 - Javascript

As of now in 2017, you can just write

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

  // deltaY obviously records vertical scroll, deltaX and deltaZ exist too.
  // this condition makes sure it's vertical scrolling that happened
  if(event.originalEvent.deltaY !== 0){

    if(event.originalEvent.deltaY < 0){
      // wheeled up
    }
    else {
      // wheeled down
    }
  }
});

Works with current Firefox 51, Chrome 56, IE9+

Solution 4 - Javascript

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

Solution 5 - Javascript

Answers talking about "mousewheel" event are refering to a deprecated event. The standard event is simply "wheel". See https://developer.mozilla.org/en-US/docs/Web/Reference/Events/wheel

Solution 6 - Javascript

This worked for me:)

 //Firefox
 $('#elem').bind('DOMMouseScroll', function(e){
     if(e.originalEvent.detail > 0) {
         //scroll down
         console.log('Down');
     }else {
         //scroll up
         console.log('Up');
     }

     //prevent page fom scrolling
     return false;
 });

 //IE, Opera, Safari
 $('#elem').bind('mousewheel', function(e){
     if(e.originalEvent.wheelDelta < 0) {
         //scroll down
         console.log('Down');
     }else {
         //scroll up
         console.log('Up');
     }

     //prevent page fom scrolling
     return false;
 });

from stackoverflow

Solution 7 - Javascript

Here is a vanilla solution. Can be used in jQuery if the event passed to the function is event.originalEvent which jQuery makes available as property of the jQuery event. Or if inside the callback function under we add before first line: event = event.originalEvent;.

This code normalizes the wheel speed/amount and is positive for what would be a forward scroll in a typical mouse, and negative in a backward mouse wheel movement.

Demo: http://jsfiddle.net/BXhzD/

var wheel = document.getElementById('wheel');

function report(ammout) {
    wheel.innerHTML = 'wheel ammout: ' + ammout;
}

function callback(event) {
    var normalized;
    if (event.wheelDelta) {
        normalized = (event.wheelDelta % 120 - 0) == -0 ? event.wheelDelta / 120 : event.wheelDelta / 12;
    } else {
        var rawAmmount = event.deltaY ? event.deltaY : event.detail;
        normalized = -(rawAmmount % 3 ? rawAmmount * 10 : rawAmmount / 3);
    }
    report(normalized);
}

var event = 'onwheel' in document ? 'wheel' : 'onmousewheel' in document ? 'mousewheel' : 'DOMMouseScroll';
window.addEventListener(event, callback);

There is also a plugin for jQuery, which is more verbose in the code and some extra sugar: https://github.com/brandonaaron/jquery-mousewheel

Solution 8 - Javascript

This is working in each IE, Firefox and Chrome's latest versions.

$(document).ready(function(){
		$('#whole').bind('DOMMouseScroll mousewheel', function(e){
			if(e.originalEvent.wheelDelta > 0 || e.originalEvent.detail < 0) {
				alert("up");
			}
			else{
				alert("down");
			}
		});
	});

Solution 9 - Javascript

I was stuck in this issue today and found this code is working fine for me

$('#content').on('mousewheel', function(event) {
    //console.log(event.deltaX, event.deltaY, event.deltaFactor);
    if(event.deltaY > 0) {
      console.log('scroll up');
    } else {
      console.log('scroll down');
    }
});

Solution 10 - Javascript

use this code

 knob.bind('mousewheel', function(e){  
 if(e.originalEvent.wheelDelta < 0) {
    moveKnob('down');
  } else {
    moveKnob('up');
 }
  return false;
});

Solution 11 - Javascript

The plugin that @DarinDimitrov posted, jquery-mousewheel, is broken with jQuery 3+. It would be more advisable to use jquery-wheel which works with jQuery 3+.

If you don't want to go the jQuery route, MDN highly cautions using the mousewheel event as it's nonstandard and unsupported in many places. It instead says that you should use the wheel event as you get much more specificity over exactly what the values you're getting mean. It's supported by most major browsers.

Solution 12 - Javascript

my combination looks like this. it fades out and fades in on each scroll down/up. otherwise you have to scroll up to the header, for fading the header in.

var header = $("#header");
$('#content-container').bind('mousewheel', function(e){
	if(e.originalEvent.wheelDelta > 0) {
		if (header.data('faded')) {
			header.data('faded', 0).stop(true).fadeTo(800, 1);
		}
	}
	else{
		if (!header.data('faded')) header.data('faded', 1).stop(true).fadeTo(800, 0);
	}
});

the above one is not optimized for touch/mobile, I think this one does it better for all mobile:

var iScrollPos = 0;
var header = $("#header");
$('#content-container').scroll(function () {

	var iCurScrollPos = $(this).scrollTop();
	if (iCurScrollPos > iScrollPos) {
		if (!header.data('faded')) header.data('faded', 1).stop(true).fadeTo(800, 0);

	} else {
		//Scrolling Up
		if (header.data('faded')) {
			header.data('faded', 0).stop(true).fadeTo(800, 1);
		}
	}
	iScrollPos = iCurScrollPos;

});

Solution 13 - Javascript

If using mentioned jquery mousewheel plugin, then what about to use the 2nd argument of event handler function - delta:

$('#my-element').on('mousewheel', function(event, delta) {
    if(delta > 0) {
    console.log('scroll up');
    } 
    else {
    console.log('scroll down');
    }
});

Solution 14 - Javascript

I think many key things are a bit all over the place and I needed to read all the answers to make my code work as I wanted, so I will post my findings in just one place:

You should use "wheel" event over the other deprecated or browser specific events.
Many people here is getting something wrong: the opposite of x>0 is x<=0 and the opposite of x<0 is x>=0, many of the answers in here will trigger scrolling down or up incorrectly when x=0 (horizontal scrolling).
Someone was asking how to put sensitivity on it, for this you can use setTimeout() with like 50 ms of delay that changes some helper flag isWaiting=false and you protect yourself with if(isWaiting) then don't do anything. When it fires you manually change isWaiting=true and just below this line you start the setTimeout again who will later change isWaiting=false after 50 ms.

Solution 15 - Javascript

I got same problem recently where $(window).mousewheel was returning undefined

What I did was $(window).on('mousewheel', function() {});

Further to process it I am using:

function (event) {
	var direction = null,
		key;

	if (event.type === 'mousewheel') {
		if (yourFunctionForGetMouseWheelDirection(event) > 0) {
			direction = 'up';
		} else {
			direction = 'down';
		}
	}
}

Content Type	Original Author	Original Content on Stackoverflow
Question	thejh	View Question on Stackoverflow
Solution 1 - Javascript	mahdi shahbazi	View Answer on Stackoverflow
Solution 2 - Javascript	Jesse Dupuy	View Answer on Stackoverflow
Solution 3 - Javascript	Louis Ameline	View Answer on Stackoverflow
Solution 4 - Javascript	Darin Dimitrov	View Answer on Stackoverflow
Solution 5 - Javascript	Brian Di Palma	View Answer on Stackoverflow
Solution 6 - Javascript	Anjith K P	View Answer on Stackoverflow
Solution 7 - Javascript	Sergio	View Answer on Stackoverflow
Solution 8 - Javascript	futuredayv	View Answer on Stackoverflow
Solution 9 - Javascript	Prafull Sharma	View Answer on Stackoverflow
Solution 10 - Javascript	Bal mukund kumar	View Answer on Stackoverflow
Solution 11 - Javascript	Cobertos	View Answer on Stackoverflow
Solution 12 - Javascript	Thomas Hartmann	View Answer on Stackoverflow
Solution 13 - Javascript	Mojo	View Answer on Stackoverflow
Solution 14 - Javascript	ajax333221	View Answer on Stackoverflow
Solution 15 - Javascript	Szymon Toda	View Answer on Stackoverflow