javascript - 为什么平滑滚动只能第一次工作？

Question

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

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

但是，在单击 Scroll（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);
}