為窗口滾動的每n個像素執行一些操作

Question

我想為每27px窗口滾動做一些事情。 我編寫了以下代碼，放在一個scroll事件處理程序中：

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

但不知怎的，它不起作用。
當我滾動非常慢時，事件會被定期觸發（雖然我不知道它是否真的在27px之后），但是當我快速滾動時，事件似乎是隨機觸發/根本沒有觸發。

我猜錯誤在於假設scroll事件是為每個滾動的px觸發的，因為這需要scrollSpy++方法才能工作。

但當然，我不確定這是不是真的錯誤。 我該怎么做呢？

注意：這個問題與這個問題沒有重復，因為接受的答案是針對卷軸的。

---

編輯：
所以根據答案，我寫了這個if語句：

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

但它仍然無法正常工作。 當我快速滾動時，該功能失敗。 所以它與scroll事件的觸發方式有關。 你知道任何解決方案嗎？ 可能是setTimeout還是setInterval ？

Answer 1

你的假設是正確的。 你應該檢查多少

document.documentElement.scrollTop + document.body.scrollTop

函數調用之間的變化。 如果它增加，則用戶向下滾動，反之亦然。

利用這些知識來確定何時做你正在做的事情。

Answer 2

不， scroll的每個像素都不會觸發scroll事件。 無論如何，您可以使用window.pageYOffset ， 根據pageYOffset的MDN文檔中的描述，根據需要使用回退，並檢查每個scroll事件的值的變化方向和值。