如何在无限长的网页上实现平滑的无限自动滚动？

问题描述

我有一个无限长的网页（当页面离底部 x 距离时，它会加载新的块）。我想通过 Javascript 以最小化抖动/跳跃的方式实现此网页的平滑自动滚动。

我尝试了两种主要方法：setInterval() 和 requestAnimationFrame()。到目前为止，setInterval() 似乎提供了最好的视觉性能，尽管我的速度受到限制（至少在 Chrome 上），因为低于大约 50 毫秒的间隔似乎在大约 50 毫秒（并且每个跳跃超过几个像素）帧”产生视觉伪影）。 requestAnimationFrame() 大部分时间都可以正常工作，但偶尔会出现跳跃和抖动。

我尝试过的两种方法的代码如下。我应该尝试其他方法（或调整）吗？实现这一目标的最佳方法是什么？

setInterval() method：

let html;

window.onload = function() {
  html = document.documentElement;

  setInterval(function() {
    let scrollTop = Math.round(html.scrollTop);
    let increment = 2;
    html.scrollTop += increment;
  },16);
};

requestAnimationFrame() 方法（基于 Chrome 开发人员的 this post）：

function animationInterval(ms,signal,callback) {
  const start = document.timeline.currentTime;

  function frame(time) {
    if (signal.aborted) return;
    callback(time);
    scheduleFrame(time);
  }

  function scheduleFrame(time) {
    const elapsed = time - start;
    const roundedElapsed = Math.round(elapsed / ms) * ms;
    const targetNext = start + roundedElapsed + ms;
    const delay = targetNext - performance.Now();
    setTimeout(() => requestAnimationFrame(frame),delay);
  }

  scheduleFrame(start);
}

const controller = new AbortController();

animationInterval(20,controller.signal,time => {
  let scrollTop = html.scrollTop;
  let increment = 2;
  html.scrollTop += increment;
});

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）