Question

我正在尝试使用setInterval（）和window.scrollBy（）

顺利滚动页面

我会使用jQuery的animate函数，但动画需要是连续的并且无限循环（页面内容将是无限的）。

这个想法很简单：

var x = 1;
var y = 1;

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

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

我遇到两个问题：

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

这是一个试验的小提琴：

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

谢谢！

Answer 1

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

Answer 2

相反，

NavigationView{
    ZStack{
        Color.blue
        VStack{
            Text("Hello, World!")
                .foregroundColor(Color.blue)
                .fontWeight(.bold)
                .font(.system(size: 36))
        }
    }
    .navigationBarHidden(true)
    .navigationBarTitle("")
    .navigationBarBackButtonHidden(true)
}
.frame(maxWidth: .infinity, maxHeight: .infinity)
.edgesIgnoringSafeArea(.all)

使用此

var x = 1;
var y = 1;

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

Answer 3

只需单击即可在任意页面上自动滚动的另一种方法，我创建了一个书签，我将其放在我的书签工具栏上，这样只需单击一下鼠标就可以看到它。然后我只使用此代码编辑了它的属性，如果页面没有自动滚动，只需在单击时自动滚动页面。如果它已经自动滚动，那么它只是将其停止，这样您就可以打开自动滚动并通过单击它来关闭自动滚动。这是我在书签中保存的代码作为位置，只需复制以下代码然后打开任何浏览器，右键单击工具栏上的任何现有书签并转到属性，然后粘贴代码或创建新书签并粘贴代码作为位置，如果使用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＆amp; 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 4

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

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

使用window.scrollBy进行平滑滚动

4 个答案: