使用window.scrollBy进行平滑滚动

Question

我正在尝试使用setInterval()和window.scrollBy()顺利滚动页面

我会使用jQuery的animate函数,但动画需要是连续的并且无限循环(页面内容将是无限的).

这个想法很简单:

var x = 1;
var y = 1;

setInterval(function() {
    window.scrollBy(0, x);
}, y);

如何在不使动画显得跳跃的情况下提高滚动速度？

我遇到两个问题:

1. setInterval()不能将Y值小于1(或者可能接近30,具体取决于浏览器限制)
2. 增加X的值会导致动画跳跃(由于像素被完全跳过)

这是一个试验的小提琴:

http://jsfiddle.net/eoojrqh6/2/

谢谢!

Answer 1

使用behavioroption 而不是setInterval它更简单，这是正确的方法，

var x = 1;
var y = 1;

window.scrollBy({
    top: x,
    left: y,
    behavior : "smooth"
})

scrollBy 有一个属性“行为”将其设置为“平滑”。

Answer 2

而不是window.scrollBy你可以使用window.scroll.

http://jsfiddle.net/peterdotjs/f7yzLzyx/1/

var x = 1; //y-axis pixel displacement
var y = 1; //delay in milliseconds

setInterval(function() {
    window.scroll(0, x);
    x = x + 5; //if you want to increase speed simply increase increment interval
}, y);

由于您当前的y值设置非常低,您可以调整值y和增量值x以查找所需的滚动速度.