为窗口滚动的每n个像素执行一些操作

Question

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

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

但不知怎的，它不起作用。
当我滚动得非常慢时，事件会被定期触发（虽然我不知道它是否真的在27px之后），但是当我快速滚动时，事件似乎是随机触发的/根本没有触发。

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

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

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

---

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

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

但它还没有奏效。当我快速滚动时，该功能失败。因此它与scroll事件的触发方式有关。你知道任何解决方案吗？可能setTimeout或setInterval？

Answer 1

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

document.documentElement.scrollTop + document.body.scrollTop

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

利用这些知识确定何时做你正在做的事情。

Answer 2

不，每个滚动的像素都不会触发scroll个事件。无论如何，您可以使用window.pageYOffset代替the MDN documentation for pageYOffset中所述的必要回退，并检查每个scroll事件的值在哪个方向和值上发生变化。