在jQuery中检测用户向下滚动或向上滚动[重复]答案

【问题标题】：Detect user scroll down or scroll up in jQuery [duplicate]在jQuery中检测用户向下滚动或向上滚动[重复]
【发布时间】：2012-03-31 16:56:51
【问题描述】：

可能重复：
Differentiate between scroll up/down in jquery?

是否可以检测用户是向下滚动还是向上滚动？

例子：

$(window).scroll(function(){

    // IF USER SCROLL DOWN 
           DO ACTION

    // IF USER SCROLL UP 
           DO ANOTHER ACTION

});

谢谢

【问题讨论】：

标签： jquery events scroll bind

【解决方案1】：

要区分 jQuery 中的向上/向下滚动，您可以使用：

var mousewheelevt = (/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll" : "mousewheel" //FF doesn't recognize mousewheel as of FF3.x
$('#yourDiv').bind(mousewheelevt, function(e){

    var evt = window.event || e //equalize event object     
    evt = evt.originalEvent ? evt.originalEvent : evt; //convert to originalEvent if possible               
    var delta = evt.detail ? evt.detail*(-40) : evt.wheelDelta //check for detail first, because it is used by Opera and FF

    if(delta > 0) {
        //scroll up
    }
    else{
        //scroll down
    }   
});

此方法也适用于具有overflow:hidden 的 div。

我在 FireFox、IE 和 Chrome 中测试成功。

【讨论】：

这很好用！一个简单的e.preventDefault() 也不允许您的滚动转到任何父元素（例如页面），如果您只是想在部分的滚动上做某事而不实际滚动您的元素或其父元素
在苹果触控板或隐藏溢出的魔术鼠标上对此有何想法？ stackoverflow.com/q/32512924/770127
这不应该再做，浏览器嗅探已经有一段时间不是很好的做法了。现在还有另一个跨浏览器事件可以更好地使用。 stackoverflow.com/a/33334461/3168107
这很好用，但是当我点击鼠标滚轮滚动时不起作用。
感谢您的工作 sn-p @Jordi van Duijn