首页 > 网络编程 > JavaScript > javascript技巧 > JS判断页面滚动方向

JavaScript判断页面滚动方向的三种方法

2025-04-21 10:45:33 作者：Muxxi

这篇文章主要介绍了JavaScript判断页面滚动方向的三种方法：使用变量记录、使用更精确的 delta 值判断和使用 requestAnimationFrame 优化性能,并通过代码讲解的非常详细,需要的朋友可以参考下

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

window.addEventListener('scroll', function() {
  const currentScroll = window.pageYOffset || document.documentElement.scrollTop;
  
  if (currentScroll > lastScrollTop) {
    // 向下滚动
    console.log('向下滚动');
  } else if (currentScroll < lastScrollTop) {
    // 向上滚动
    console.log('向上滚动');
  }
  
  lastScrollTop = currentScroll <= 0 ? 0 : currentScroll;
}, false);

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

window.addEventListener('scroll', function() {
  const currentScrollPosition = window.pageYOffset;
  const scrollDelta = currentScrollPosition - lastScrollPosition;
  
  if (scrollDelta > 0) {
    console.log('向下滚动', scrollDelta);
  } else if (scrollDelta < 0) {
    console.log('向上滚动', scrollDelta);
  }
  
  lastScrollPosition = currentScrollPosition;
});

方法三：使用 requestAnimationFrame 优化性能

let ticking = false;

window.addEventListener('scroll', function() {
  lastKnownScrollPosition = window.scrollY;
  
  if (!ticking) {
    window.requestAnimationFrame(function() {
      const current = lastKnownScrollPosition;
      const direction = current > (lastKnownScrollPosition || 0) ? 'down' : 'up';
      console.log(direction);
      ticking = false;
    });
    
    ticking = true;
  }
});

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

1，element.scrollTop

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

// 获得滚动的像素数
const intElemScrollTop = element.scrollTop;

// 设置滚动的距离
element.scrollTop = intValue;

2，window.scrollY 和 window.pageYOffset

返回文档在垂直方向已滚动的像素值。但 window.pageYOffset 兼容性更好。

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

3，获取页面滚动距离

最兼容性的写法：

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

这也是 skrollr 库使用的写法。

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