爲什麼光滑的scrollBy只能第一次工作？

Question

我使用下面的代碼放在一個website模仿平滑滾動：

function scrollWindow() { 
    // window.scrollBy(1040,0) 
    var timerID = setInterval(function() { 
     window.scrollBy(104, 0); 
     if(window.pageXOffset >= 1040) clearInterval(timerID); 
    }, 10); 
} 

但是，單擊滾動（的滾屏功能）的頁面滾動1040像它應該後。

任何後續時間，它不起作用，除非我手動回滾到開始。

我是否認爲if(window.pageXOffset >= 1040)是取消它，因爲它雖然沒有移動 1040，它已經超過了頁面上的那一點？

如果是這樣，我該如何解決這個問題？

Answer 1

是的，您的評估是正確的;但它可以用在方法一捻進行修正：

function scrollWindow() { 
    var scrolledSoFar = 0; 
    var scrollStep = 104; 
    var scrollEnd = 1040; 
    var timerID = setInterval(function() { 
     window.scrollBy(scrollStep, 0); 
     scrolledSoFar += scrollStep; 
     if(scrolledSoFar >= scrollEnd) clearInterval(timerID); 
    }, 10); 
} 

更新
代碼另一個缺陷是，你檢查的條件之前執行scrollBy。因此，在您的頁面上，即使您滾動過1040後，點擊scroll也會將該頁面移動一個scrollStep數量。爲了防止這種情況，這個順序更好：

function scrollWindow() { 
    var scrolledSoFar = 0; 
    var scrollStep = 104; 
    var scrollEnd = 1040; 
    var timerID = setInterval(function() { 
     if(scrolledSoFar < scrollEnd) { 
      window.scrollBy(scrollStep, 0); 
      scrolledSoFar += scrollStep; 
     } else { 
      clearInterval(timerID); 
     } 
    }, 10); 
}