Question

您好我使用以下方法以编程方式滚动Web文档：

window.scrollBy(0, delta)

scrollBy的当前实现只是将文档跳转到新位置。有没有办法动画这个？我特意使用webkit，jQuery（或任何其他javascript框架）不是一个选项。

感谢您提前提供任何帮助。

Answer 1

您可以通过调用间隔来为其设置动画：

setInterval(function() {
    window.scrollBy(0, 5);
}, 13);

这当然会一遍又一遍地做，所以你需要进行条件检查，何时取消间隔。可能看起来像：

var timerID = setInterval(function() {
    window.scrollBy(0, 5);

    if( window.pageYOffset >= 500 )
        clearInterval(timerID);
}, 13);

Answer 2

每次调用此函数时，无论pageYOffset在何处，它都会跳转window.scrollBy（0,5）中的像素数。例如，如果pageYOffset是300px，它将跳转到305px。

但是这个问题可以通过移动if并添加else来解决
如此：

var timerID = setInterval(function() {
    if( window.pageYOffset <= 500 )
        window.scrollBy(0, 5);

    else
        clearInterval(timerID);
}, 1);

动画窗口滚动

2 个答案: