判断页面滚动方向的方法

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

let 复制代码
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 值判断

let 复制代码
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 复制代码
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;
  }
});
相关推荐
DoraBigHead8 分钟前
【JS三兄弟谁是谁】搞懂 splice、slice、split,只需一杯奶茶的时间!
前端·javascript·面试
国家不保护废物9 分钟前
前端存储与后端服务的奇妙冒险:一个Node.js服务器的诞生记(cookie实现用户登入)
前端·javascript·后端
前端付豪10 分钟前
2、前端架构三要素:模块化、工程化、平台化
前端·javascript·架构
WildBlue13 分钟前
流式输出:前端工程师的魔术表演,小白也能看懂!🎩✨
前端·javascript·node.js
多啦C梦a16 分钟前
React 事件机制大揭秘:从 addEventListener 到合成事件,别再一脸懵逼!
前端·javascript
一天睡25小时18 分钟前
一款减轻前端图片命名工作量的图片转换器
前端·javascript·html
LuckySusu24 分钟前
【JS篇】JavaScript 数据类型检测的四种常用方式详解
前端·javascript
金串串43 分钟前
js-day10
javascript
Xy9101 小时前
App Trace功能实战:一键拉起应用实践
前端·javascript·产品
小泡芙丫1 小时前
JavaScript类型转换:一场让你又爱又恨的"变形记"
前端·javascript