使用jQuery检测用户向下或向上滚动

Question

可能是重复问题：
如何区分在jQuery中向上或向下滚动？

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

例子：

$(window).scroll(function(){

    // IF USER SCROLL DOWN 
           DO ACTION

    // IF USER SCROLL UP 
           DO ANOTHER ACTION

});

谢谢

- Steffi

Answer 1

为了区分jQuery中的向上/向下滚动，您可以使用以下代码：

```javascript $(window).on('scroll', function() { if ($(this).scrollTop() > lastScrollTop){ // scroll down code } else { // scroll up code } lastScrollTop = $(this).scrollTop(); }); ```

请注意，`lastScrollTop`是一个变量，它需要在函数外部定义。

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属性的

元素。

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

- Jordi van Duijn

---

这个非常好用！一个简单的e.preventDefault()也可以防止滚动到任何父元素（比如页面），如果你只想在某个部分的滚动上做一些事情，而不是实际滚动你的元素或其父级。 - Alex White

有没有关于在苹果触摸板或魔术鼠标上使用overflow hidden的想法？https://dev59.com/GI7ea4cB1Zd3GeqPIf_B - ryanve

这种做法已经不再适用了，浏览器嗅探已经有一段时间没有被广泛采用了。现在有另一种跨浏览器事件可以更好地使用。https://dev59.com/7Ww05IYBdhLWcg3wkivX#33334461 - Shikkediel

这个功能非常好，但是当我点击鼠标滚轮进行滚动时无法使用。 - Tyler

感谢@Jordi van Duijn提供的代码片段。 - Ana DEV

将 .bind 改为 .on，.bind() 已被弃用。 - buycanna.io