使用 javascript 平滑自动滚动

IT技术 javascript jquery autoscroll
2021-03-07 10:08:12

我正在尝试在我的网页上实现一些代码以在加载页面后自动滚动。我使用Javascript函数来执行自动滚动,并且在页面加载时调用了我的函数,但是页面仍然无法平滑滚动!有什么办法可以自动平滑地滚动我的页面吗?

这是我的 Javascript 函数:

function pageScroll() {
        window.scrollBy(0,50); // horizontal and vertical scroll increments
        scrolldelay = setTimeout('pageScroll()',100); // scrolls every 100 milliseconds
}
6个回答

这并不顺利,因为每 100 毫秒滚动增加 50。

将此和滚动的数量更改为较小的数字,以使函数运行时感觉更“平滑”。

调低速度量以使其更快或更慢。

function pageScroll() {
    window.scrollBy(0,1);
    scrolldelay = setTimeout(pageScroll,10);
}

看起来会更顺畅,试试吧;)

scrollBy 支持可以将滚动设置为smooth的“行为”字典autodeveloper.mozilla.org/en-US/docs/Web/API/ScrollToOptions/...
2021-05-06 10:08:12
你能在这段代码中告诉我一种方法吗,这样我就可以在用户使用鼠标滚动时停止自动滚动
2021-05-10 10:08:12
如果这是正确的答案,那么请务必将其标记为 ;) 另外,这将需要使用 jquery 最轻松地完成另一个功能并将其检查为事件
2021-05-15 10:08:12
我建议不要将字符串传递给,setTimeout因为这相当于调用eval('pageScroll') use 之类的东西,例如 setTimeout(function(){ //coolcodehere }, 10) 将函数传递给 setTimeout 的地方,而不是字符串
2021-05-20 10:08:12
@johnnyutah 后者是目标。这似乎是我的错别字,抱歉。
2021-05-20 10:08:12

尝试使用 jQuery,以及这段代码:

$(document).ready(function(){
     $('body,html').animate({scrollTop: 156}, 800); 
});

156 - 从页面顶部滚动到 (px)。
800 - 滚动持续时间(毫秒)

只是更正,800是动画的持续时间,不是速度
2021-05-01 10:08:12

您可能想查看jQuery ScrollTo插件的源代码,它可以平滑滚动。或者甚至可能只是使用插件而不是滚动你自己的功能。

流畅运行的动画取决于客户端机器。无论您的编码多么公平,您永远不会对动画在 128 MB Ram 系统上运行的方式感到满意。

以下是使用 jQuery 滚动的方法:

$(document).scrollTop("50");

您可能还想尝试AutoScroll Plugin

你可以使用jfunc函数来做到这一点。用途jFunc_ScrollPageDownjFunc_ScrollPageUp作用。 http://jfunc.com/jFunc-Functions.aspx

jfunc.com 域名出售中
2021-05-19 10:08:12