在 jQuery 中获取鼠标滚轮事件？

有没有办法在 jQuery 中获得鼠标滚轮事件(不谈 scroll事件) ？

308466 次浏览
小开
最佳答案

有一个 插件检测上下鼠标轮和速度在一个地区。

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

关于“鼠标滚轮”事件的答案是指一个不推荐的事件。标准的事件就是“滚轮”。参见 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;
});

从堆栈溢出

小开

绑定到 mousewheel和 DOMMouseScroll对我来说非常有效:

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

这种方法适用于 IE9 + 、 Chrome33和 Firefox27。

编辑-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;
});
})();

参见 CodePen上 Jesse Dupuy 的钢笔 香草卷轴跟踪(@ 瞎猜85)。

此代码目前在 Chrome v50, Firefox v44, Safari v9, and IE9+中工作

参考文献:

小开

我最近也遇到了同样的问题 $(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';
}
}
}
小开

我的密码是这样的。它在每次向下/向上滚动时淡出和淡入。否则，您必须向上滚动到标题，以便在。

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;


});
小开

这是香草味的。如果传递给函数的事件是 event.originalEvent，则可以在 jQuery 中使用，jQuery 将 event.originalEvent作为 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");
}
});
});
小开

我今天被这个问题困住了，发现这个代码对我来说工作得很好

$('#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');
}
});
小开

@ DarinDimitrov 发布的插件，jquery-mousewheel，被 jQuery 3 + 破坏了。最好使用与 jQuery 3 + 一起工作的 jquery-wheel。

如果你不想走 jQuery 的路线，MDN 高度警惕使用 mousewheel事件在很多地方是不标准和不受支持的。取而代之的是 您应该使用 wheel事件，因为你得到了更多的特异性，确切地说你得到的值是什么意思。大多数主流浏览器都支持它。

小开

到了2017年，你可以写作

$(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
}
}
});

适用于当前的 Firefox 51，Chrome 56，IE9 +

小开

如果使用上面提到的 鼠标轮插件，那么如何使用事件处理函数 delta的第二个参数:

$('#my-element').on('mousewheel', function(event, delta) {
if(delta > 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;
});
小开

我认为很多关键的东西都有点杂乱无章，我需要阅读所有的答案来让我的代码按照我的想法工作，所以我只在一个地方发布我的发现:

  • 应该使用 "wheel"事件而不是其他不推荐的或浏览器特定的事件。
  • 这里的很多人都搞错了: x>0的反面是 x<=0，x<0的反面是 x>=0，这里的很多答案在 x=0(水平滚动)时会触发向下或向上的错误。
  • 有人问如何把敏感性对它，为此你可以使用 setTimeout()与大约50毫秒的延迟，改变一些助手标志 isWaiting=false和你保护自己与 if(isWaiting)然后不要做任何事情。当它发射你手动改变 isWaiting=true和刚好低于这一行你再次启动 SetTimeout谁将稍后改变 isWaiting=false后50毫秒。

提交答案