19

我正在尝试在我的网页上实现一些代码以在加载页面后自动滚动。我使用了一个Javascript函数来执行自动滚动，当页面加载时我调用了我的函数，但是页面仍然滚动不顺畅！有什么办法可以自动流畅地滚动我的页面吗？

这是我的 Javascript 函数：

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

8 回答 8

38

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

将此以及您滚动的数量更改为较小的数字，以使该功能以更加“流畅”的错觉运行。

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

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

看起来会更流畅，试试吧；）

于 2012-03-23T10:42:53.433 回答
13

尝试使用 jQuery，这段代码：

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

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

于 2012-03-23T10:40:12.217 回答
1

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

于 2012-03-23T10:38:25.637 回答
1

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

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

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

您可能还想尝试AutoScroll Plugin。

于 2012-03-23T10:43:43.683 回答
1

你可以使用jfunc函数来做到这一点。用途jFunc_ScrollPageDown和jFunc_ScrollPageUp功能。 http://jfunc.com/jFunc-Functions.aspx。

于 2013-10-06T06:42:24.443 回答
0

既然您已将问题标记为“jquery”，为什么不尝试类似的东西.animate()？这个特殊的 jquery 函数旨在平滑地为各种属性设置动画，包括数字 CSS 属性以及滚动位置。

于 2012-03-23T10:39:05.343 回答
0

数字是硬编码的，但想法是逐项移动（标题为 52px），当下降时，返回

let elem = document.querySelector(".spfxBirthdaysSpSearch_c7d8290b ");
let lastScrollValue = 0
let double_lastScrollValue = 0
let scrollOptions = { top: 79, left: 0, behavior: 'smooth' }
let l = console.log.bind(console)

let intScroll = window.setInterval(function() {
    double_lastScrollValue = lastScrollValue //last
    lastScrollValue = elem.scrollTop // after a scroll, this is current
    if (double_lastScrollValue > 0 && double_lastScrollValue == lastScrollValue){
        elem.scrollBy({ top: elem.scrollHeight * -1, left: 0, behavior: 'smooth' });
    } else {
        if (elem.scrollTop == 0){
            elem.scrollBy({ top: 52, left: 0, behavior: 'smooth' });
        } else {
            elem.scrollBy(scrollOptions);
        }
    }
}, 1000);
于 2021-04-22T07:49:43.303 回答
0

这是对此的另一种看法，使用requestAnimationFrame. 它使您可以控制滚动时间，并支持缓动功能。它非常强大，但公平警告：用户无法中断滚动。

// Easing function takes an number in range [0...1]
// and returns an eased number in that same range.
// See https://easings.net/ for more.
function easeInOutSine(x) { return -(Math.cos(Math.PI * x) - 1) / 2; }

// Simply scrolls the element from the top to the bottom.
// `elem` is the element to scroll
// `time` is the time in milliseconds to take.
// `easing` is an optional easing function.
function scrollToBottom(elem, time, easing)
{
  var startTime = null;
  var startScroll = elem.scrollTop;
  // You can change the following to scroll to a different position.
  var targetScroll = elem.scrollHeight - elem.clientHeight;
  var scrollDist = targetScroll - startScroll;
  
  easing = easing || (x => x);
  function scrollFunc(t)
  {
    if (startTime === null) startTime = t;
    
    var frac = (t - startTime) / time;
    if (frac > 1) frac = 1;
    
    elem.scrollTop = startScroll + Math.ceil(scrollDist * easing(frac));
    
    if (frac < 0.99999)
      requestAnimationFrame(scrollFunc);
  }
  requestAnimationFrame(scrollFunc);
}

// Do the scroll
scrollToBottom(document.getElementById("data"), 10000, easeInOutSine);
于 2022-02-04T17:56:52.680 回答