JS判断页面滚动方向：变量记录、Delta值与requestAnimationFrame优化

本文介绍JavaScript中判断页面滚动方向的三种实现方式：通过变量记录上次位置、利用delta差值精确判断，以及使用requestAnimationFrame优化性能。同时补充了获取页面滚动距离的兼容写法，涵盖element.scrollTop、window.scrollY及window.pageYOffset的使用场景。

策略一：借助变量存储历史滚动坐标


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判断页面滚动方向内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！

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