检测总的累加滚动距离

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摘要运行程序中理想地工作，但在浏览器中似乎可以正常工作。