判断页面滚动方向的方法

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

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;
  }
});
相关推荐
工业甲酰苯胺3 小时前
TypeScript枚举类型应用:前后端状态码映射的最简方案
javascript·typescript·状态模式
谢尔登7 小时前
【React Native】ScrollView 和 FlatList 组件
javascript·react native·react.js
然我7 小时前
面试官:如何判断元素是否出现过?我:三种哈希方法任你选
前端·javascript·算法
kk_stoper8 小时前
如何通过API查询实时能源期货价格
java·开发语言·javascript·数据结构·python·能源
晨枫阳8 小时前
前端VUE项目-day1
前端·javascript·vue.js
颜酱8 小时前
抽离ant-design后台的公共查询设置
前端·javascript·ant design
绅士玖9 小时前
JavaScript 设计模式之单例模式🚀
前端·javascript·设计模式
Dream耀9 小时前
useReducer:React界的"灭霸手套",一个dispatch搞定所有状态乱局
前端·javascript·react.js
余大侠在劈柴9 小时前
pdf.js 开发指南:在 Web 项目中集成 PDF 预览功能
前端·javascript·学习·pdf
拾光拾趣录9 小时前
JavaScript屏幕切换检测方案
前端·javascript