javascript 使用 window.scrollBy 平滑滚动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28977498/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Smooth Scroll Using window.scrollBy
提问by coryetzkorn
I'm trying to smoothly scroll a page using setInterval() and window.scrollBy()
我正在尝试使用 setInterval() 和 window.scrollBy() 平滑滚动页面
I would use jQuery's animate function, but the animation needs to be continuous and loop infinitely (the page contents will be infinite).
我会使用 jQuery 的 animate 函数，但动画需要连续和无限循环（页面内容将是无限的）。
The idea is fairly simple:
这个想法很简单：
var x = 1;
var y = 1;
setInterval(function() {
window.scrollBy(0, x);
}, y);
How can I increase the scroll speed without making the animation appear jumpy?
如何在不使动画看起来跳动的情况下提高滚动速度？
I'm experience two problems:
我遇到两个问题：
- setInterval() can't take a Y value less than 1 (or probably closer to 30, depending on browser limits)
- Increasing the value of X causes the animation to be jumpy (due to pixels being skipped altogether)
- setInterval() 的 Y 值不能小于 1（或可能接近 30，具体取决于浏览器限制）
- 增加 X 的值会导致动画跳跃（由于完全跳过像素）
Here's a fiddle to experiment with:
这是一个实验的小提琴：
http://jsfiddle.net/eoojrqh6/2/
http://jsfiddle.net/eoojrqh6/2/
Thanks!
谢谢！
回答by peterdotjs
Rather than window.scrollByyou can use window.scroll.
而不是window.scrollBy您可以使用window.scroll.
http://jsfiddle.net/peterdotjs/f7yzLzyx/1/
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);
As you currently have yvalue set very low, you can adjust the values of yand the incremental value of xto find the desired scroll speed.
由于您当前的y值设置得非常低，您可以调整 的值y和 的增量值x以找到所需的滚动速度。
回答by Rohit Nishad
Instead of this,
取而代之的是，
var x = 1;
var y = 1;
setInterval(function() {
window.scrollBy(0, x);
}, y);
Use this,
用这个，
var x = 1;
var y = 1;
windows.scrollby({
top: x,
left: y,
behavior : "smooth"
})
回答by dep
An alternative method to just auto-scrolling on any page with a click, I created a bookmark that I placed on my bookmark toolbar so it's always visible and accessible with a single click of the mouse. Then I just edited it's properties with this code that simply auto-scrolls the page when clicked, if the page isn't auto-scrolling. If it is already auto-scrolling, then it simply stops it so you can turn on auto-scrolling and turn off auto-scrolling by just clicking on it. Here is the code I saved in the bookmark as the location, just copy the following code and then open up any browser, either right click on any existing bookmarks on your toolbar and goto properties, then paste the code or create new bookmark and paste the code as the Location if using Firefox
通过单击在任何页面上自动滚动的另一种方法是，我创建了一个书签，将其放置在我的书签工具栏上，因此单击鼠标始终可以看到和访问它。然后我只是用这段代码编辑了它的属性，如果页面没有自动滚动，点击时它会自动滚动页面。如果它已经在自动滚动，那么它只是停止它，这样您就可以打开自动滚动并通过单击它来关闭自动滚动。这是我保存在书签中的代码作为位置，只需复制以下代码，然后打开任何浏览器，右键单击工具栏上的任何现有书签并转到属性，然后粘贴代码或创建新书签并粘贴如果使用 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}
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}
For Internet Explorer & Chrome, use this code that doesn't contain the %20 for spaces
对于 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); }
javascript:var isScrolling; var 滚动延迟；函数 pageScroll() { window.scrollBy(0,1); scrolldelay = setTimeout('pageScroll()',15); isScrolling = true; } if(isScrolling != true) { pageScroll(); } else { isScrolling = false; 清除超时（滚动延迟）；}
Just edit the values to change the speed according to your own preference for what looks best on your computer since the effect won't be the same unanymously for every display
只需编辑值以根据您自己的喜好更改速度以在您的计算机上看起来最好，因为每个显示器的效果不会完全相同
