平滑滚动以播放截屏视频

最新推荐文章于 2024-10-02 05:39:15 发布

cunqu9743

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量207

点赞数

文章标签： javascript dom js yuv web ViewUI

假设您要以编程方式从顶部到底部滚动网页。例如，您正在录制屏幕录像，并且需要一个漂亮的整页滚动。您可能无法自己滚动它，因为它会不平坦且生涩。本机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（），可以通过一些自定义缓动对其进行扩展。这是一个演示。

看笔
 jQuery 轻松滚动 Chris Coyier （ @chriscoyier ）
在CodePen上。