javascript - 使用 css 滚动捕捉时如何获取 window.scrollTop、ScrollY 或任何其他距离值

Question

我正在使用 css scroll snap 滚动浏览高度为 100vh 的内容。滚动快照效果很好。

也就是说，我需要确定网站访问者由于几个不同的原因滚动了多远。

我试过了：

let wrapper = document.getElementById('landing-page-wrapper');
console.log(wrapper.offsetTop);
console.log(window.scrollY);

我也尝试过 window.scrollTop、wrapper.scrollTop 等等。

这是我所看到的Codepen

我如何知道使用 100vh 部分和 css scroll-snap 时滚动的距离

TIA

score 0 · Accepted Answer

根据您的共享代码，window.onscroll无法按预期工作的原因是既没有window也没有document.body垂直溢出。只有溢出的元素才会触发滚动事件，在这种情况下，它实际上是匹配.box-wrapper选择器的元素。

因此，如果您收听该元素上的滚动事件，那么您应该能够使用以下方法检索其垂直滚动位置event.currentTarget.scrollTop：

document.querySelector(".box-wrapper").addEventListener("scroll", (e) => {
  console.log(e.currentTarget.scrollTop);
});

请参阅概念验证示例：

1 回答 1