在 Chrome 49 中順暢捲動

Paul Lewis

想要順暢瀏覽某些元素嗎?Chrome 過去在某些地方支援流暢的捲動功能,例如當使用者用觸控板捲動畫面,或在行動裝置上快速翻頁時。但是,當使用者插入滑鼠時,便會產生更順暢的「循序」捲動行為,這樣就比較不美觀了。以上就是 Chrome 49 的異動內容。

對許多開發人員而言,循序漸進的原生輸入式捲動行為解決方案是使用程式庫,目標是將其重新對應到更順暢、更順暢的視角。使用者也可以利用擴充功能來做到這點。不過,程式庫和擴充功能會變更捲動的缺點:

  • 迷人的山谷。這種資訊清單本身會以兩種方式呈現:首先,一個網站可能有流暢的捲動行為,另一個網站則可能沒有,因此使用者最後可能會覺得這項機制不一致。其次,這個程式庫的平滑物理特性未必符合平台的物理特性。因此,即使動作能夠平滑順手,可能會感覺錯誤或不安然。
  • 提高主要執行緒爭用和卡頓的傾向。就像網頁中加入 JavaScript 一樣,CPU 負載會增加。視網頁的其他作業而定,這未必是災難,但如果主執行緒有長時間執行的工作,並使捲動與主執行緒融為一體,淨結果可能會延遲捲動和卡頓。
  • 不僅可讓開發人員投入更多心力,還能讓使用者下載更多程式碼。如果想讓程式庫順暢捲動,就必須保持最新狀態和維護,這會影響網站的整體網頁權重。

許多程式庫的捲動行為 (無論是視差效果或其他捲動耦合動畫) 通常也有這些缺點。這些機制都常會觸發資源浪費、對無障礙功能造成乾擾,並造成使用者體驗大打折扣。捲動是網頁的核心互動,使用程式庫進行修改時應格外謹慎。

在 Chrome 49 版中,預設的捲動行為將改變 Windows、Linux 和 ChromeOS。舊的逐步捲動行為即將停用,捲動功能將自動平穩地捲動!您無須修改程式碼,除非有人使用,並移除任何順暢的捲動程式庫。

更多捲動體驗

此外,作品中還有其他與捲動相關的功能,值得一提。許多人都希望透過捲動耦合效果,像是視差、流暢地捲動至文件片段 (例如 example.com/#somesection)。我稍早提到,目前使用的方法往往會對開發人員和使用者造成負面影響。目前正在開發的平台標準有兩種:合成器 Worklet 和 scroll-behavior CSS 屬性。

宏迪尼

合成器 Worklet 屬於 Houdini 的一部分,尚未完整提供並且實作。也就是說,修補程式落地可以讓您編寫在合成器管道中執行的 JavaScript,在一般情況下,由於視差等捲動耦合效果,會和目前的捲動位置完美保持同步。由於目前系統處理捲動事件,其中捲動事件只會定期傳送至主執行緒,而且可能會遭到其他主要執行緒作業封鎖,因此能大幅加快遷移速度。如果你對 Compositor Worklets 或任何 Houdini 推出的任何其他令人期待的新功能,請參閱 Surma 的 Houdini 簡介文章Houdini 規格,歡迎將想法告訴我們,歡迎到 Houdini 郵寄清單中!

捲動行為

如果是以片段為基礎的捲動功能,scroll-behavior CSS 屬性也是不錯的方法。如果您想試用看看,一定很高興得知該影片已透過 Firefox 寄出,您可以在 Chrome Canary 中使用「啟用實驗性 Web Platform 功能」標記來啟用這項功能。如果您對 <body> 元素scroll-behavior: smooth進行設定,那麼因為片段變更或 window.scrollTo 所觸發的所有捲動都會流暢地呈現動畫效果!比起使用及維護程式庫中企圖執行相同操作的程式碼,這樣會更加妥善。就像捲動一樣的基本功能,避免破壞使用者期望是非常重要的,因此即使這些功能變動,我們仍然值得採用漸進式增強方法,並移除任何試圖實現這些行為的程式庫。

往下捲動並捲動網頁

從 Chrome 49 版開始,捲動功能會更順暢。除此之外,我們還透過 Houdini 和 smooth-scroll 等 CSS 資源,打造出更多可能的改善成果。歡迎試用 Chrome 49,並將你的想法告訴我們。最棒的是,讓瀏覽器為你增添捲動的體驗