在 Chrome 49 中流畅滚动

Paul Lewis

如果说用户对滚动功能有任何期望,那就是希望滚动流畅。过去,Chrome 在某些情况下可以实现流畅滚动,例如当用户使用触控板滚动或在移动设备上快速滑动网页时。但是,如果用户插入了鼠标,则会看到更不稳定的“阶梯式”滚动行为,这在视觉上要差得多。在 Chrome 49 中,这一切都将改变。

许多开发者在解决输入驱动型原生分层滚动行为问题时,都采用了使用库的解决方案,目的是将其重新映射为更流畅、更美观的滚动行为。用户也可以通过扩展程序执行此操作。不过,更改滚动方式的库和扩展程序都有缺点:

  • 产生“不寒而栗”的感觉。这会以两种方式表现出来:首先,一个网站的滚动行为可能很流畅,而另一个网站的滚动行为可能不流畅,因此用户最终可能会因这种不一致性而感到迷失。其次,库的平滑度物理特性未必与平台的物理特性一致。因此,虽然动作可能很流畅,但可能会感觉不对或不自然。
  • 主线程争用和卡顿的可能性增加。与添加到网页的任何 JavaScript 一样,CPU 负载也会增加。这不一定是灾难性的,具体取决于页面正在执行的其他操作,但如果主线程上有一些长时间运行的工作,并且滚动已与主线程耦合,最终结果可能会是滚动卡顿和卡顿。
  • 开发者需要进行更多维护,用户需要下载更多代码。使用用于实现流畅滚动的库需要定期更新和维护,并且会增加网站的总页面大小。

许多处理滚动行为的库(无论是视差效果还是其他与滚动相关联的动画)也常常存在这些缺点。这些问题经常会导致卡顿、妨碍无障碍使用,并通常会破坏用户体验。滚动是 Web 的核心互动,因此应谨慎使用库来更改滚动。

在 Chrome 49 中,Windows、Linux 和 ChromeOS 的默认滚动行为将发生变化。旧的阶梯式滚动行为将被弃用,滚动将默认变为流畅滚动!无需更改代码,除非您使用了任何平滑滚动库,则可能需要将其移除。

更多滚动功能

我们还在开发其他与滚动相关的实用功能,也值得一提。我们中的许多人希望实现与滚动相关的效果,例如平行视觉效果、平滑滚动到文档 fragment(例如 example.com/#somesection)。正如我之前提到的,目前使用的这些方法通常对开发者和用户都有害。我们正在开发两个平台标准,它们可能会有所帮助:Compositor Worklet 和 scroll-behavior CSS 属性。

Houdini

合成器 Worklet 是 Houdini 的一部分,尚未完全规范化和实现。不过,补丁发布后,您就可以编写在合成器流水线中运行的 JavaScript,这通常意味着,与当前滚动位置完全同步的滚动耦合效果(例如视差)将得到保留。鉴于目前滚动处理方式(仅定期将滚动事件发送到主线程,并且可能会被其他主线程工作阻塞),这将是一个巨大的飞跃。如果您对 Compositor Worklet 或 Houdini 带来的任何其他令人兴奋的新功能感兴趣,请参阅 Surma 撰写的“Houdini 简介”博文Houdini 规范,并在 Houdini 邮寄名单中分享您的想法!

scroll-behavior

对于基于 fragment 的滚动,scroll-behavior CSS 属性 也非常有用。好消息是,如果您想试用该功能,可以使用 “Enable experimental Web Platform features” 标志在 Chrome Canary 中启用该功能,Firefox 中已提供该功能。如果您将 <body> 元素设置为 scroll-behavior: smooth,则由 fragment 更改或 window.scrollTo 触发的所有滚动都会以流畅的动画效果呈现!这比不得不使用和维护试图执行相同操作的库中的代码要好得多。对于滚动等基本功能,避免违背用户预期非常重要。因此,虽然这些功能仍处于动态变化之中,但仍值得采用渐进式增强方法,并移除任何尝试对这些行为进行预填充的库。

继续滚动

从 Chrome 49 开始,滚动会更加流畅。但这还不是全部:我们还可以通过 Houdini 和 smooth-scroll 等 CSS 属性实现更多潜在的改进。欢迎试用 Chrome 49,并告诉我们您的想法。最重要的是,尽可能让浏览器执行滚动操作!