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

Question

我正在使用 css 滚动捕捉来滚动高度为 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

Answer 1

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

因此，如果您监听该元素上的滚动事件，那么您应该能够使用 event.currentTarget.scrollTop:

检索其垂直滚动位置

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

参见proof-of-concept示例：