javascript - 为窗口滚动的每 n 个像素做一些事情

Question

我想为窗口每滚动 27px 做一些事情。我编写了以下代码，放置在scroll事件处理程序中：

scrollSpy++
if (scrollSpy > 27) {
    scrollSpy = 0;
    console.log("27px scrolled");
}

但不知何故，它不起作用。
当我滚动非常慢时，事件会定期触发（尽管我无法判断它是否真的在 27px 之后），但是当我快速滚动时，事件似乎是随机触发的/根本不是触发的。

我猜错误在于假设scroll每个滚动像素都会触发事件，因为这是该scrollSpy++方法工作的要求。

但是，当然，我不确定这是否真的是错误。我该如何正确地做到这一点？

注意：这个问题与这个问题没有重复，因为接受的答案是针对卷轴的。

编辑：
所以根据答案，我写了这个 if 语句：

if (window.pageYOffset % 27 === 0) {
    // do something
}

但它仍然无法正常工作。当我快速滚动时，功能失败。所以它与scroll事件的触发方式有关。你知道有什么解决办法吗？setTimeout或者setInterval也许？

score 2 · Accepted Answer

你的假设是正确的。你应该检查多少

document.documentElement.scrollTop + document.body.scrollTop

函数调用之间的变化。如果它增加，则用户正在向下滚动，反之亦然。

使用这些知识来确定什么时候做你正在做的事情。

score 1 · Accepted Answer

不，scroll不会为滚动的每个像素触发事件。无论如何，您可以改用MDN 文档中window.pageYOffset描述的必要的后备，并检查每个事件的值在哪个方向和多少变化。pageYOffsetscroll

2 回答 2