logo标签列表

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

javascriptjquerymousewheel
153

在jQuery中是否有一种方法可以获取鼠标滚轮事件（不是scroll事件）？

2
快速搜索找到了这个插件，可能会有所帮助。 - Jerad Rose
这个解决方案对我有效：https://dev59.com/7Ww05IYBdhLWcg3wkivX - Bertie
@thejh 在此发布了一个关于DOM3事件的新回答：https://dev59.com/J2sy5IYBdhLWcg3w-i_h#24707712 - Sergio
可能是 jQuery scroll() detect when user stops scrolling 的重复问题。 - divy3993
仅作说明。如果您只想检测输入内容的更改，并且它无法通过鼠标滚轮检测更改，请尝试使用 $（el）.on（'input'，...。 - rybo111
15个回答
1
0

我认为许多关键的事情有点分散，我需要阅读所有答案才能使我的代码按照我想要的方式工作，因此我将在一个地方发布我的发现：

  • 您应该使用"wheel"事件而不是其他已弃用或特定于浏览器的事件。
  • 这里有很多人都搞错了： x>0的相反数是x<=0，x<0的相反数是x>=0，这里的许多答案会在x=0（水平滚动）时错误地触发向下或向上滚动。
  • 有人问如何设置灵敏度，对此，您可以使用setTimeout()，延迟50毫秒更改一些辅助标志isWaiting=false，并通过if(isWaiting)保护自己，然后不做任何事情。当它触发时，您手动更改isWaiting=true，并在此行正下方开始setTimeout，稍后再次更改isWaiting=false。
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;

});
0
如果使用提到的{{link1：jquery mousewheel插件}}，那么考虑使用事件处理函数的第二个参数-delta：
$('#my-element').on('mousewheel', function(event, delta) {
    if(delta > 0) {
    console.log('scroll up');
    } 
    else {
    console.log('scroll down');
    }
});
-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';
        }
    }
}
您没有说明newUtilities.getMouseWheelDirection有什么新的。 - ccsakuweb
这超出了本问题的范围，所以它不是复制粘贴的网站。 - Szymon Toda
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接