使用jQuery检查鼠标滚轮事件而不滚动条

如何检查没有滚动条的鼠标滚轮运动？

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

Answer 1

我强烈建议你使用这个jQuery插件： PLUGIN

如果没有插件，请尝试以下示例： 示例

HTML：

使用Javascript：

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

div上没有滚动条，但检测到滚轮事件。

Answer 2

使用此代码

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

Answer 3

而且，如果您根本不想使用任何插件（IE8，Chrome，Firefox，Safari，Opera ……），请执行以下操作：

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

生活示例： http ： //jsfiddle.net/CvCc6/1/

Answer 4

这只是@Aaron回答的更新，使用了新的“wheel”事件，如下所述： 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 !'); } }); 

您还可以使用deltaX来查看水平滚动，或者如果您有一些疯狂的3D事情，则使用deltaX 。