需要一個 JS function 每滾動 1000px 就做一些事情

Question

基本上我需要一個 function，或者更確切地說，一個 window 事件偵聽器，它每滾動 1000 像素執行一個操作（從上到下和從下到上）。 每個答案都表明我使用了這樣的模塊：

 if (window.scrollY % 1000 == 0) {//do something} 

但它不起作用，因為window.scrollY不會返回每個像素，它可能會返回5000 ，所以5000%1000實際上是0 ，但另一次它可能會返回一個大約 5000 的數字，比如 5123 不會從模塊運算符返回 0。 這是我現在的 JS function：

window.addEventListener("scroll", e => {

        scrollpos = window.scrollY;
        // console.log(scrollDown);
        console.log("\n pos: " + scrollpos);


        if (scrollpos % 1000 == 0) {

            // if (imgIndex < totImg - 1) {
            //     imgIndex++;
            // } else {
            //     imgIndex = 0;
            // }

            // imgArr[imgIndex + 1].style.opacity = "0";
            // imgArr[imgIndex].style.opacity = "1";
            console.log("\n\n\nworked on: " + scrollpos+"\n\n\n");

        }


    });

我添加了一些控制台日志，您可以在其中清楚地看到 window.scrollY 不會返回每個像素，這就是為什么 if 不會每 1000 像素記錄一次消息

Answer 1

您可以跟蹤最后一個 position 並且每次觸發滾動事件時，將增量添加到緩沖區中。 當此類緩沖區超過給定閾值 (1000) 時，它將觸發另一個操作並且緩沖區將被重置。

https://developer.mozilla.org/zh-CN/docs/Web/API/Window/scrollY

Window 接口的只讀 scrollY 屬性返回文檔當前垂直滾動的像素數。

因此，這不足以確定自過去最近的卷軸以來經過了多少空間。 但是，如果我們每次都存儲最新檢索到的值，只有在我們已經使用該值計算了前一個 position 與當前值之間的距離之后，我們才能每次累計滾動到現在的距離。

當這樣的累計距離超過 1000 時，我們重新設置距離緩沖區和計數循環。

值得一提的是，我們在當前位置和先前位置之間的差異上方使用了Math.abs ，因為無論如何距離都是正值。

 let lastPos = 0; let buffer = 0; window.addEventListener("scroll", e => { const scrollpos = window.scrollY; buffer += Math.abs(scrollpos - lastPos); lastPos = scrollpos; if (buffer >= 1000) { buffer = 0; console.log(`worked on: ${scrollpos}`); } logNumber(buffer.toFixed(2)); }); function logNumber(value){ document.getElementById('buffer').innerText = value; }

 body{ font-size: 20px; }.page{ height: 1000cm; border: solid; padding: 1em; }.topnav{ position: sticky; top: 0; text-align: right; padding: 3em 6em; } #buffer{ border: solid 4px gray; padding: .5em; font-size: 40px; font-weight: 600; font-family: sans-serif; }

 <div class="topnav"> <span id="buffer">0</span> </div> <div class="page">Page content...</div>

Answer 2

我將提供一個答案，盡管我不能 100% 確定我是否正確理解了問題。

據我了解，特定問題是您的模運算僅適用於 0、1000、2000、3000 等。 使用 state 變量 ( prevScroll ) 和 integer 除法 ( Math.floor(window.scrollY / threshold) ) 可以很容易地解決這個問題：

let prevScroll = 0
const threshold = 1000

window.addEventListener("scroll", () => {
    const currScroll = Math.floor(window.scrollY / threshold)

    if (currScroll !== prevScroll) {
        prevScroll = currScroll

        // Your code
    }
})