Use jQuery to check mousewheel event without scrollbar

Question

How to check mouse wheel movement without scrollbar?

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

Answer 1

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 in the div, but a wheel event has been detected.

Answer 2

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

 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; } } 

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

Answer 3

use this code

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

Answer 4

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 view horizontal scrolling or deltaZ if you have some kind of crazy 3D thing.