为什么平滑scrollBy仅在第一次工作？

Question

我在网站上使用以下代码模仿平滑滚动：

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

但是，单击“滚动”（scrollWindow函数）后，页面将按其应有的方式滚动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);
}