屏幕录像的平滑滚动 | CSS-Tricks

假设您想要以编程方式从上到下滚动网页。例如，您正在录制屏幕录像，并且想要一个不错的全页面滚动。您可能无法自己滚动它，因为它会变得不均匀且卡顿。原生 JavaScript 可以进行平滑滚动。这是一个可能适合您的微小代码段

window.scrollTo({
  top: document.body.getBoundingClientRect().height,
  behavior: 'smooth'
});

但是，无法控制速度或缓动！对于屏幕录像来说，速度可能太快了。我发现了一个小技巧，最初由（我认为）Jedidiah Hurt 发布。

诀窍是使用 CSS 变换而不是实际滚动。 这样，速度和缓动都可以控制。这是我稍微清理过的代码

const scrollElement = (element, scrollPosition, duration) => {
  
  // useful while testing to re-run it a bunch.
  // element.removeAttribute("style"); 
  
  const style = element.style;
  style.transition = duration + 's';
  style.transitionTimingFunction = 'ease-in-out';
  style.transform = 'translate3d(0, ' + -scrollPosition + 'px, 0)';
}

scrollElement(
  document.body, 
  (
    document.body.getBoundingClientRect().height
    -
    document.documentElement.clientHeight
    +
    25
  ),
  5
);

思路是为整个文档的高度变换一个负的顶部位置，但减去您所能看到的的高度，这样它就不会过度滚动。这里有一个可能需要调整的小魔法数字，以便让它恰好适合您。

这是一部我用这种方式录制的电影

它仍然不完全是完美的平滑。我部分归咎于视频的 FPS，但即使用我的眼睛观看它录制，它也不是完全顺滑的。如果我需要更高的质量，我可能会重新启动我的电脑，并将此页面作为唯一的选项卡和打开的应用程序，哈哈。

查看演示

另一个可能性是使用一些老式的 jQuery .animate()，它可以用一些自定义缓动来扩展。这是一个演示。

查看 Pen
带有缓动的 jQuery 平滑滚动由 Chris Coyier (@chriscoyier)
在 CodePen 上。