javascript - 检测总滚动距离

Question

我想检测用户在网站上滚动的总距离。因此我想将向下滚动距离和向上滚动距离相加。

例如:用户向下滚动 150 像素并滚动回页面顶部，结果应为 300 像素。

使用window.pageYOffset我可以检测向下的距离。如何将两个方向相加？

//编辑:

Answer 1

您需要一个计数器 - totalOffset。您需要检查当前滚动位置 - currOffset。您需要一个在滚动时触发并计算当前位置和缓存位置之间的距离并更新计数器和缓存位置的函数。

let totalOffset = 0;
let currOffset = window.pageYOffset;
window.addEventListener(
  "scroll",
  () => {
    let addedOffset = Math.abs(currOffset - window.pageYOffset);
    totalOffset += addedOffset;
    currOffset = window.pageYOffset;
    console.log('the total scroll in px is: ', totalOffset);
  },
  false
);

<div style="min-height:2000px">
<div>

它在 SO 片段运行器中可能无法正常工作，但在浏览器中似乎工作正常。