有没有办法在jQuery中获取鼠标滚轮事件（不是在讨论scroll事件）？
答案 0 :(得分：183)
$(document).ready(function(){
$('#foo').bind('mousewheel', function(e){
if(e.originalEvent.wheelDelta /120 > 0) {
console.log('scrolling up !');
}
else{
console.log('scrolling down !');
}
});
});
答案 1 :(得分：141)
绑定到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;
});
})();请参阅Vanilla JS Scroll Tracking上Jesse Dupuy（@blindside85）的笔CodePen。
此代码目前在Chrome v50, Firefox v44, Safari v9, and IE9+
参考文献：
答案 2 :(得分：45)
有一个plugin可以检测一个区域上的鼠标滚轮和速度。
答案 3 :(得分：37)
关于“mousewheel”事件的答案正在引用一个已弃用的事件。标准事件只是“轮子”。见https://developer.mozilla.org/en-US/docs/Web/Reference/Events/wheel
答案 4 :(得分：36)
截至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 +
答案 5 :(得分：15)
这对我有用：）
//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;
});
答案 6 :(得分：14)
这是一个香草解决方案。如果传递给函数的事件是event.originalEvent，jQuery可用作jQuery事件的属性，则可以在jQuery中使用。或者，如果我们在第一行之前的callback函数内添加event = event.originalEvent;。
此代码标准化了车轮速度/数量，对于典型鼠标中的前向滚动为正，而向后鼠标滚轮移动为负。
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
答案 7 :(得分：8)
这适用于每个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");
}
});
});
答案 8 :(得分：4)
今天我遇到了这个问题，发现这段代码对我来说很好用
$('#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');
}
});
答案 9 :(得分：3)
使用此代码
c4.8xlarge答案 10 :(得分：0)
我的组合看起来像这样。它逐渐淡出并逐渐淡入/向下滚动。否则你必须向上滚动到标题，以淡化标题。
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;
});
答案 11 :(得分：0)
@DarinDimitrov发布的插件jquery-mousewheel，is broken with jQuery 3+。建议使用适用于jQuery 3 +的jquery-wheel。
如果您不想使用jQuery路由MDN highly cautions using the mousewheel event，因为它在许多地方都是非标准且不受支持的。它代之以you should use the wheel event，因为你对你所获得的价值究竟是什么具有更多的特异性。它得到了大多数主流浏览器的支持。
答案 12 :(得分：0)
如果使用提到的jquery mousewheel plugin，那么如何使用事件处理函数的第二个参数 - delta：
$('#my-element').on('mousewheel', function(event, delta) {
if(delta > 0) {
console.log('scroll up');
}
else {
console.log('scroll down');
}
});
答案 13 :(得分：0)
我认为很多关键的东西都有些杂乱无章，我需要阅读所有的答案才能让我的代码按我的意愿工作，所以我只会在一个地方发布我的发现：
"wheel" 事件用于其他已弃用或浏览器特定的事件。x>0 的反义词是 x<=0，x<0 的反义词是 x>=0，这里的很多答案都会触发滚动x=0 时向下或向上不正确（水平滚动）。setTimeout() 大约 50 毫秒的延迟来更改某些辅助标志 isWaiting=false，然后您使用 if(isWaiting) 保护自己什么都不做。当它触发时，您手动更改 isWaiting=true，并在此行下方再次启动 setTimeout，后者将在 50 毫秒后更改 isWaiting=false。答案 14 :(得分：-3)
我最近遇到了同样的问题
$(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';
}
}
}