使用 window.scrollBy 平滑滚动

Question

我正在尝试使用 setInterval() 和 window.scrollBy()

平滑地滚动页面

我会用jQuery的animate功能，但是动画需要连续无限循环（页面内容会无限循环）。

这个想法很简单：

var x = 1;
var y = 1;

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

如何提高滚动速度而不会使动画显得跳动？

我遇到了两个问题：

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

这里有一个 fiddle 用于试验：

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

谢谢！

Answer 1

您可以使用 window.scroll。

而不是 window.scrollBy

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 的增量值以找到所需的滚动速度。

Answer 2

我创建了一个书签，将其放置在我的书签工具栏上，因此只需单击鼠标即可始终显示和访问它，这是一种只需单击即可在任何页面上自动滚动的替代方法。然后，我只是用这段代码编辑了它的属性，如果页面没有自动滚动，则在单击时简单地自动滚动页面。如果它已经在自动滚动，那么它只是停止它，这样您就可以通过单击它来打开和关闭自动滚动。这是我保存在书签中的代码作为位置，只需复制以下代码，然后打开任何浏览器，右键单击工具栏上的任何现有书签并转到属性，然后粘贴代码或创建新书签并粘贴如果使用 Firefox

，则代码作为位置

javascript:var%20isScrolling;%20var%20scrolldelay;%20function%20pageScroll()%20{%20window.scrollBy(2,1);%20scrolldelay%20=%20setTimeout('pageScroll()',.1);%20isScrolling%20=%20true;%20}%20if(isScrolling%20!=%20true)%20{%20pageScroll();%20}%20else%20{%20isScrolling%20=%20false;%20clearTimeout(scrolldelay);%20}

对于 Internet Explorer 和 Chrome，请使用不包含空格 %20 的代码

javascript:var isScrolling; var scrolldelay; function pageScroll() { window.scrollBy(0,1); scrolldelay = setTimeout('pageScroll()',15); isScrolling = true; } if(isScrolling != true) { pageScroll(); } else { isScrolling = false; clearTimeout(scrolldelay); }

只需根据您自己的偏好编辑值以更改速度，以便在您的计算机上看起来最好，因为每个显示器的效果不会完全相同

Answer 3

使用 behavior 选项而不是 setInterval 它更简单并且是正确的方法，

var x = 1;
var y = 1;

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

Answer 4

2020年解决方案 您可以使用具有 smooth 的属性行为的 scrollTo 函数，因此您的代码如下。

//Excluding event listener functions.
//one liner solutions for scrolling to the bottom and top of a document.

const footer = document.body.scrollHeight;
const scrollDown = (footer)=>{
return window.scrollTo({top: footer, behavior: 'smooth'});
}

只需将顶部属性值减为零即可滚动到顶部。

const nav = 0;
const scrollUp = ()=>{
return window.scrollTo({top: nav, behavior: 'smooth'});
}

Answer 5

您还可以滚动其他元素：

document.querySelector('.el-class').scrollBy({
  top: 100,
  behavior: 'smooth',
});

使用 window.scrollBy 平滑滚动

Smooth Scroll Using window.scrollBy

javascript

animation