方法一：使用变量记录上次滚动位置

1. window.addEventListener('scroll', function() {
   
2.   const currentScroll = window.pageYOffset || document.documentElement.scrollTop;
   
3.   
   
4.   if (currentScroll > lastScrollTop) {
   
5.     // 向下滚动
   
6.     console.log('向下滚动');
   
7.   } else if (currentScroll < lastScrollTop) {
   
8.     // 向上滚动
   
9.     console.log('向上滚动');
   
10.   }
    
11.   
    
12.   lastScrollTop = currentScroll <= 0 ? 0 : currentScroll;
    
13. }, false);

复制代码

方法二：使用更精确的 delta 值判断

1. window.addEventListener('scroll', function() {
   
2.   const currentScrollPosition = window.pageYOffset;
   
3.   const scrollDelta = currentScrollPosition - lastScrollPosition;
   
4.   
   
5.   if (scrollDelta > 0) {
   
6.     console.log('向下滚动', scrollDelta);
   
7.   } else if (scrollDelta < 0) {
   
8.     console.log('向上滚动', scrollDelta);
   
9.   }
   
10.   
    
11.   lastScrollPosition = currentScrollPosition;
    
12. });

复制代码

方法三：使用 requestAnimationFrame 优化性能

1. let ticking = false;
   
2. 
   
3. window.addEventListener('scroll', function() {
   
4.   lastKnownScrollPosition = window.scrollY;
   
5.   
   
6.   if (!ticking) {
   
7.     window.requestAnimationFrame(function() {
   
8.       const current = lastKnownScrollPosition;
   
9.       const direction = current > (lastKnownScrollPosition || 0) ? 'down' : 'up';
   
10.       console.log(direction);
    
11.       ticking = false;
    
12.     });
    
13.    
    
14.     ticking = true;
    
15.   }
    
16. });

复制代码

拓展：JS获取页面滚动距离


1，element.scrollTop

获取或设置一个元素的内容垂直滚动的像素数。

1. // 获得滚动的像素数
   
2. const intElemScrollTop = element.scrollTop;
   
3. 
   
4. // 设置滚动的距离
   
5. element.scrollTop = intValue;

复制代码

2，window.scrollY 和 window.pageYOffset

返回文档在垂直方向已滚动的像素值。但

1. window.pageYOffset

复制代码

兼容性更好。

1. window.pageYOffset === window.scrollY; // true

复制代码

3，获取页面滚动距离

最兼容性的写法：

1. const useScrollTop = () => {
   
2.   return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
   
3. }

复制代码

这也是 skrollr 库使用的写法。
到此这篇关于JavaScript判断页面滚动方向的三种方法的文章就介绍到这了,更多相关JS判断页面滚动方向内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源：https://www.jb51.net/javascript/340041qic.htm
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！