jquery - 用于用户输入的 jQuery 滚动侦听器（即使页面不可滚动）

Question

当用户尝试滚动时，是否可以有一个 jQuery 或 javascript 侦听器，即使网页不可滚动？当用户尝试向下滚动时，我需要执行一些代码，即使网页足够短以至于没有滚动。

请注意，此解决方案不需要适用于触摸屏。

更新当用户尝试向上滚动而不是向下滚动时，我需要执行不同的代码。

Answer 1

$(window).on('mousewheel', function (e) {
    if (e.originalEvent.wheelDeltaY < 0) {
        alert("Scrolled down");
    } else if (e.originalEvent.wheelDeltaY > 0) {
        alert("Scrolled up");
    }
});

似乎不同的浏览器为您提供了不同的增量。 此解决方案不适用于 IE 等所有浏览器！

---

我真的建议你看看 Brandon Aaron 的 Mousewheel-Plugin for jQuery，它也适用于 IE：https ://github.com/brandonaaron/jquery-mousewheel

使用该插件，您应该能够获得更好的解决方案：

$(window).on('mousewheel', function(event, delta, deltaX, deltaY) {
    if (deltaY < 0) {
        alert("Scrolled down");
    } else if (deltaY > 0) {
        alert("Scrolled up");
    }
});

Answer 2

更新：使用on而不是bind插入滚动方向。还添加DOMMouseScroll以使其在 Firefox 中工作。

只需使用：

$(window).on('mousewheel DOMMouseScroll',function(e){
    // To catch up or down scroll:
    e = e.originalEvent;
    // delta == 1 = down, delta == -1 = up;
    var delta = e.wheelDelta > 0 || e.detail < 0 ? 1 : -1;
}

如果您愿意，也可以将其绑定到其他东西。

Answer 3

感谢您的回答和建议，但我找到了一个适合我的版本： 在 jQuery 中获取鼠标滚轮事件？

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