如何在Vanilla JS中获取相对于上一次滚动的Y轴滚动位置？

嗨，这个需求其实很好实现，核心思路就是跟踪上一次的滚动位置，每次滚动触发时用当前位置减去上一次的位置，得到的就是你要的「自上一次滚动以来的偏移量」。

具体实现步骤 #

• 先声明一个变量，用来保存上一次的滚动Y坐标，初始值直接设为当前的滚动位置即可：

  let lastScrollY = window.scrollY; // 和window.pageYOffset效果一致，选哪个都行
  

• 给window添加滚动事件监听器，在回调里计算偏移差值：

  window.addEventListener('scroll', () => {
    const currentScrollY = window.scrollY;
    // 计算自上一次滚动的偏移量
    const deltaY = currentScrollY - lastScrollY;
    
    // 这里可以根据需求处理deltaY：比如打印、做滚动动画逻辑等
    console.log('自上一次滚动的Y偏移量:', deltaY);
    // 小提示：deltaY为正代表向下滚动，为负代表向上滚动
    
    // 最后一定要更新上一次的滚动位置，为下一次计算做准备
    lastScrollY = currentScrollY;
  });
  

可选优化：防抖处理 #

因为scroll事件触发频率极高，可能会带来不必要的性能消耗。如果你的业务逻辑不需要实时响应每一次滚动触发，可以给滚动事件加个防抖，减少回调执行次数：

let lastScrollY = window.scrollY;
let debounceTimer;

window.addEventListener('scroll', () => {
  clearTimeout(debounceTimer);
  debounceTimer = setTimeout(() => {
    const currentScrollY = window.scrollY;
    const deltaY = currentScrollY - lastScrollY;
    console.log('防抖后的Y偏移量:', deltaY);
    lastScrollY = currentScrollY;
  }, 100); // 100ms的延迟，可根据实际需求调整
});

这样就能精准拿到你需要的「自上一次滚动以来的Y轴偏移量」啦～

内容的提问来源于stack exchange，提问作者thomas