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

Question

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

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

但不知何故它不起作用。
当我滚动得非常慢时，事件会很规律地触发(虽然我不知道它是否真的在 27px 之后)，但是当我快速滚动时，事件似乎是随机触发的/根本没有触发。

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

当然，我不确定这是否真的是错误。我该如何正确执行此操作？

注意:此问题与 this question 不重复，因为接受的答案是针对卷轴的。

---

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

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

但是还是不行。当我快速滚动时，该功能失败。所以跟scroll事件的触发方式有关系。你知道这个有什么解决办法吗？ setTimeout 或 setInterval 可能吗？

Answer 1

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

document.documentElement.scrollTop + document.body.scrollTop

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

使用这些知识来确定何时做您正在做的事情。