Question

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

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);
}

为什么平滑的scroll只能第一次工作？

1 个答案: