在jQuery获取鼠标滚轮事件？
有没有办法在jQuery中获得鼠标滚轮事件（而不是讨论scroll事件）？
有一个插件可以检测上下鼠标滚轮和一个区域的速度。
$(document).ready(function(){ $('#foo').bind('mousewheel', function(e){ if(e.originalEvent.wheelDelta /120 > 0) { console.log('scrolling up !'); } else{ console.log('scrolling down !'); } }); });
绑定mousewheel和DOMMouseScroll最终对我来说真的很好：
$(window).bind('mousewheel DOMMouseScroll', function(event){ if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) { // scroll up } else { // scroll down } });
此方法在IE9 +，Chrome 33和Firefox 27中工作。
编辑 – 2016年3月
自从这一段时间以来，我决定重新审视这个问题。 滚动事件的MDN页面有一个很好的方法来检索使用requestAnimationFrame的滚动位置，这比我以前的检测方法更可取。 除了滚动方向和位置之外，我修改了代码以提供更好的兼容性：
(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; }); })();
有关“鼠标滚轮”事件的答案指的是不推荐使用的事件。 标准事件只是“轮子”。 见https://developer.mozilla.org/en-US/docs/Web/Reference/Events/wheel
这对我工作:)
//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; });
从stackoverflow
这是一个香草的解决scheme。 可以在jQuery中使用，如果事件传递给函数event.originalEvent哪些jQuery可用作为jQuery事件的属性。 或者如果在第一行之前添加的callback函数内： event = event.originalEvent; 。
这个代码规范了轮子速度/数量，对于典型的鼠标中的向前滚动是正的，而在向后的鼠标轮子移动中是负的。
演示： 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);
还有一个jQuery的插件，在代码和一些额外的糖更详细： https ： //github.com/brandonaaron/jquery-mousewheel
这是在每个IE，Firefox和Chrome的最新版本。
$(document).ready(function(){ $('#whole').bind('DOMMouseScroll mousewheel', function(e){ if(e.originalEvent.wheelDelta > 0 || e.originalEvent.detail < 0) { alert("up"); } else{ alert("down"); } }); });
截至2017年，你可以写
$(window).on('wheel', function(event){ // deltaY obviously records vertical scroll, deltaX and deltaZ exist too if(event.originalEvent.deltaY < 0){ // wheeled up } else { // wheeled down } });
适用于目前的Firefox 51，Chrome 56，IE9 +
我今天遇到了这个问题，发现这个代码对我来说工作的很好
$('#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'); } });
使用这个代码
knob.bind('mousewheel', function(e){ if(e.originalEvent.wheelDelta < 0) { moveKnob('down'); } else { moveKnob('up'); } return false; });
我的组合看起来像这样。 它会逐渐淡出并逐渐消失。 否则你必须滚动到标题，淡入标题。
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); } });
上面的一个没有针对触摸/手机进行优化，我认为这对所有的手机都有好处：
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; });
@DarinDimitrov发布的插件jquery-mousewheel mousewheel 与jQuery 3+有关 。 使用jQuery 3+的jquery-wheel更为明智。
如果你不想去jQuery路由， MDN高度警告使用mousewheel事件，因为它是非标准的，在许多地方不受支持。 它反而说， 你应该使用wheel事件，因为你得到更多的特异性，而不是你所得到的价值是什么意思。 它受到大多数主stream浏览器的支持。
如果使用提到的jquery mousewheel插件 ，那么怎样使用事件处理函数的第二个参数 – delta ：
$('#my-element').on('mousewheel', function(event, delta) { if(delta > 0) { console.log('scroll up'); } else { console.log('scroll down'); } });
最近我得到了同样的问题， $(window).mousewheel返回undefined
我做的是$(window).on('mousewheel', function() {});
进一步处理它我正在使用：
function (event) { var direction = null, key; if (event.type === 'mousewheel') { if (yourFunctionForGetMouseWheelDirection(event) > 0) { direction = 'up'; } else { direction = 'down'; } } }
