(共556篇)
全部分类

判断元素的滚动方向
[ JS基础 ] 

判断元素的滚动方向

当元素滚动条位置发生变化时,通过判断滚动条的位置,可以判断元素的滚动方向:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
<style>
  body {
    margin: 0;
    height: 200%;
  }
</style>
<script>
  var scrollTop = 0;
  window.addEventListener("scroll", function(event) {
    if (window.scrollY > scrollTop) {
      console.log("元素向上滚动");
    } else {
      console.log("元素向下滚动");
    }
    scrollTop = window.scrollY;
  });
</script>

案例源码

这里通过window.scrollY获取每次滚动后的滚动条位置,可以判断整个页面的滚动方向。