在 Chrome 49 中流畅滚动

Paul Lewis

如果人们真正想要通过滚动浏览的某一方面,那就是流畅性。过去,Chrome 在某些位置会具有流畅的滚动体验,例如,当用户使用触控板滚动时,或在移动设备上快速滑动网页时。但是,如果用户插入了鼠标,那么用户会看到更加抖动的“阶梯”滚动行为,这在美感上会大大降低。Chrome 49 将全面改变。

对于许多开发者来说,针对输入驱动的分步原生滚动行为的解决方案就是使用库,其目标是将其重新映射到更流畅、更美观的滚动行为。用户也可以通过扩展程序实现这一点。不过,库和扩展程序也存在一些会改变滚动操作的缺点:

  • 山谷的神秘感。这种现象表现在两个方面:首先,一个网站的滚动行为可能流畅,但另一个网站可能没有流畅性,因此用户可能会因不一致而感到困惑。其次,该库的平滑物理特性不一定与平台物理特性一致。因此,虽然动作可能很流畅,但可能会有出错或异常的感觉。
  • 增加了发生主线程争用和卡顿的概率。与添加到网页中的任何 JavaScript 一样,CPU 负载也会增加。这不一定是灾难,具体取决于页面正在执行的操作,但如果主线程上有一些长时间运行的工作,并且滚动已与主线程结合,则最终结果可能是滚动卡顿和卡顿。
  • 开发者需要更多的维护,需要用户下载更多代码。有一个库可以实现流畅滚动,这需要时常更新和维护,而且这会增加网站的总体页面重量。

许多处理滚动行为(无论是视差效果还是其他滚动耦合动画)的库通常也存在这些缺点。这些问题经常会触发卡顿,妨碍无障碍功能访问,并且通常会破坏用户体验。滚动是 Web 的核心交互,在使用库对其进行更改时应格外小心。

在 Chrome 49 中,默认滚动行为将更改 Windows、Linux 和 ChromeOS。旧的分步滚动行为即将停用,默认情况下滚动将流畅!您无需对代码做出任何更改,但可能移除使用过的流畅滚动库。

更多滚动功能

作品中还有其他与滚动相关的好物,同样值得一提。我们很多人都希望产生滚动耦合的效果,例如视差、流畅滚动到文档片段(例如 example.com/#somesection)。正如我在前面提到的,目前使用的方法往往对开发者和用户都是有害的。有两个平台标准正在制定中来助您一臂之力:Compositor Worklet 和 scroll-behavior CSS 属性。

胡迪尼

合成器 Worklet 是 Houdini 的一部分,尚未经过全面规范和实现。也就是说,补丁推出后,您可以利用它们编写作为合成器管道的一部分运行的 JavaScript,这通常意味着视差等滚动耦合效果将与当前滚动位置完美同步。鉴于目前处理滚动的方式,滚动事件仅定期发送到主线程(并且可能被其他主线程工作阻止),这将是一个巨大的飞跃。如果您对合成器 Worklet 或 Houdini 引入的任何其他激动人心的新功能感兴趣,请参阅 Surma 发布的“Houdini 简介”博文Houdini 规范,并将您的想法发布到 Houdini 邮寄名单

滚动行为

就基于 fragment 的滚动而言,scroll-behavior CSS 属性是有用的其他方法。如果您想试用该功能,您会发现 Firefox 已提供此功能,而且您可以在 Chrome Canary 版中使用“启用实验性网络平台功能”标记启用该功能。比方说,如果您将 <body> 元素设置为 scroll-behavior: smooth,则由 fragment 更改或 window.scrollTo 触发的所有滚动都将顺畅地呈现动画效果!这比必须使用和维护来自尝试执行同一操作的代码的代码要好多了。对于像滚动这样基础的操作,避免打破用户的期望真的很重要。因此,虽然这些功能不断变化,但仍然有必要采用渐进式增强方法,并移除任何尝试对这些行为执行 polyfill 的库。

前往并滚动

从 Chrome 49 开始,滚动浏览变得更加顺畅。但这还远远不够:通过 Houdini 和 smooth-scroll 等 CSS 属性,还有更多潜在的改进机会。欢迎试用 Chrome 49,并与我们分享您的想法。最重要的是,让浏览器尽可能地滚动浏览网页!