判断scroll向上还是向下

我们在实际项目中，会遇到滚动要干嘛比如说上拉到顶部，要干嘛，下拉到底部要干嘛，上拉和下拉会有不一样的触发事件，这个时候，我们需要区分，那么怎么区分我们是在上拉还是在下拉，也就是说，怎么区分滚动条是向上还是向下的。代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>判断scroll向上还是向下</title>
      <style type="text/css">
            body,html{
                height: 100%;
                margin:0;
            }
            .wrap{
                width: 100%;
                height: 100%;
                overflow-y: scroll;
                overflow-x: hidden;
            }
            .scroll{
                width: 100%;
                height: 300%;
                background-color: #f00;
            }
        </style>
  </head>
  <body>
    <div class="wrap">
        <div class="scroll"></div>
    </div>
  </body>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script type="text/javascript">
        var scrollTop = 0;
        var t = 0;
        $(".wrap").scroll(function() {
                scrollTop = $(this).scrollTop(); //滚动高度
                if(t<=scrollTop){
                        console.log("往下滚动");
                }else{
                    console.log("往上滚动");
                }
                setTimeout(function(){t=scrollTop},0);
        });
    </script>
</html>

代码复制过去，运行一下就可以监测一下对不对了。亲测有效。

判断scroll向上还是向下

推荐阅读更多精彩内容