使用者在捲動時,最在乎的就是流暢度。過去,Chrome 在某些地方的捲動動作都很順暢,例如使用者使用觸控板捲動畫面,或是在行動裝置上快速捲動畫面。但如果使用者插入滑鼠,則會看到更為抖動、有「階梯」的捲動行為,這在視覺上會顯得較不悅目。這就是 Chrome 49 版的所有變更。
許多開發人員為瞭解決以輸入為動力的原生階梯式捲動行為,會使用程式庫,目的是重新對應更流暢、更賞心悅目的行為。使用者也可以透過擴充功能執行這項操作。不過,變更捲動功能的程式庫和擴充功能都有缺點:
- 不自然的谷地感這會以兩種方式呈現:首先,某個網站的捲動行為可能流暢,但另一個網站的捲動行為可能不流暢,因此使用者可能會因為不一致性而感到方向錯亂。其次,程式庫的流暢物理效果不一定與平台的流暢物理效果相符。因此,雖然動作可能很流暢,但看起來可能會不自然或令人毛骨悚然。
- 主執行緒爭用和卡頓的可能性增加。如同任何新增至網頁的 JavaScript,CPU 負載也會增加。這不一定會造成災難,這取決於網頁執行的其他作業,但如果主執行緒上有耗時較長的工作,且捲動已與主執行緒配對,最終結果可能會是捲動卡頓和卡頓。
- 開發人員需要進行更多維護作業,使用者則可下載更多程式碼。使用程式庫來實現流暢捲動功能,需要持續更新及維護,且會增加網站的整體網頁重量。
無論是視差效果,還是其他與捲動相關的動畫,許多處理捲動行為的程式庫通常也都會出現這些缺點。這些元素經常會導致卡頓、影響無障礙功能,並普遍損害使用者體驗。捲動是網頁的核心互動,因此請務必謹慎使用程式庫修改捲動功能。
在 Chrome 49 中,預設捲動行為將會變更 Windows、Linux 和 ChromeOS。舊的階梯式捲動行為將會消失,捲動動作預設為流暢!您不必變更程式碼,但如果您使用了任何平滑捲動程式庫,則可能需要移除這些程式庫。
更多捲動功能
我們也正在開發其他與捲動相關的功能,值得一提。許多人希望能搭配捲動效果,例如視差效果,以及捲動至文件片段 (例如 example.com/#somesection) 的流暢捲動效果。如同先前所述,目前採用的方法通常會對開發人員和使用者造成不利影響。目前有兩個平台標準正在開發中,或許可以提供協助:合成器 Worklet 和 scroll-behavior
CSS 屬性。
Houdini
合成器 Worklet 是 Houdini 的一部分,但尚未完全規範和實作。不過,修補程式推出後,您就能編寫 JavaScript,並在合成器管道中執行,這通常表示捲動相關聯的效果 (例如視差效果) 會與目前的捲動位置保持完美同步。考量目前處理捲動方式,捲動事件只會定期傳送至主執行緒 (且可能遭其他主執行緒工作阻斷),這項功能將帶來巨大的進步。如果您對合成器工作片段或 Houdini 提供的其他令人興奮的新功能感興趣,請參閱 Surma 的 Houdini 簡介文章和 Houdini 規格,並在 Houdini 聯絡清單中提供您的意見!
scroll-behavior
在以片段為基礎的捲動功能方面,scroll-behavior
CSS 屬性是另一個可提供協助的屬性。如要試用這項功能,請放心,因為這項功能已在 Firefox 中推出,您也可以使用「Enable experimental Web Platform features」標記,在 Chrome Canary 中啟用這項功能。舉例來說,如果您將 <body>
元素設為 scroll-behavior: smooth
,則所有因片段變更或 window.scrollTo
而觸發的捲動動作都會以動畫呈現,且流暢無比!這比使用及維護試圖執行相同動作的程式庫程式碼來得好。對於捲動這類基本功能,避免讓使用者失望非常重要,因此在這些功能不斷變動時,採用漸進式改善方法,並移除任何嘗試以半自動方式填補這些行為的程式庫,仍是值得採用的做法。
繼續捲動
自 Chrome 49 起,捲動功能會變得更流暢。但這還不是全部:透過 Houdini 和 smooth-scroll
等 CSS 屬性,還有更多潛在的改善空間。歡迎試用 Chrome 49,並與我們分享你的想法。最重要的是,盡可能讓瀏覽器執行捲動動作!