如何检测是否在某个元素内发生滚动

Question

我想检测指针滚动是否发生在某个元素内，然后执行某些操作。我已经尝试过这段代码，但它似乎不起作用：

var lastScrollTop = 0;
    $(".class-name").scroll(function(event){
       var st = $(this).scrollTop();
       if (st > lastScrollTop){
           console.log("scroll down");
       } else {
          console.log("scroll up");
       }
       lastScrollTop = st;
    });

你能帮我理解我做错了什么吗？

谢谢！

Answer 1

编辑：

scrollTop 为您提供元素而非页面的滚动条的当前位置。
因此，如果他没有滚动条，它将为 0。：

如果元素不可滚动，则此数字为 0。

.scroll() 也一样，如果元素没有滚动条，它将永远不会出现。

var lastScrollTop = 0;
    $(".class-name").scroll(function(event){
       var st = $(this).scrollTop();
       if (st > lastScrollTop){
           console.log("scroll down");
       } else {
          console.log("scroll up");
       }
       lastScrollTop = st;
    });

.class-name{
width:100px;
height:200px;
overflow:auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="class-name">hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello </div>