版面配置變更後捲動貼齊

從 Chrome 第 81 版開始，您不再需要新增事件監聽器來強制重新調整。

Adam Argyle

Kaan Alsan

Yi Gu

CSS 捲動貼齊可讓網頁開發人員宣告捲動貼齊位置，藉此打造精心控制的捲動體驗。目前實作方式的一個缺點是，當版面配置變更時，捲動精確對齊功能無法正常運作，例如可視區域大小變更或裝置旋轉時。Chrome 第 81 版已修正這個缺點。

互通性

許多瀏覽器都提供 CSS Scroll Snap 的基本支援。詳情請參閱「我可以使用 CSS 捲動快照嗎？」。

Chrome 目前是唯一會在版面配置變更後實作捲動自動對齊的瀏覽器。Firefox 已針對這項功能開啟支援單張，Safari 也已針對捲軸內容變更後的重新對齊功能開啟支援單張。目前，您可以將下列程式碼新增至事件監聽器，藉此模擬此行為，以便強制執行自動對齊：javascript scroller.scrollBy(0,0); 不過，這無法保證捲軸會自動對齊至相同的元素。

背景

CSS 捲動固定

CSS 捲動貼齊功能可讓網頁開發人員宣告捲動貼齊位置，藉此打造精心控管的捲動體驗。這些位置可確保可捲動的內容與容器正確對齊，以解決捲動不精確的問題。換句話說，捲動貼齊：

• 避免捲動時出現不自然的捲動位置。
• 建立翻頁瀏覽內容的效果。

分頁文章和圖片輪轉介面是捲動快照的兩個常見用途。

CSS 捲動固定功能範例。捲動結束時，圖片的水平中心會與捲動容器的水平中心對齊。

缺點

調整視窗大小時，系統會遺失 Snap 位置。

捲動自動對齊功能可讓使用者輕鬆瀏覽內容，但由於無法因應內容和版面配置的變更，因此無法發揮部分潛在優勢。如上方範例所示，使用者每次調整視窗大小時，都必須重新調整捲動位置，才能找到先前固定的元素。以下是導致版面配置變更的常見情況：

• 調整視窗大小
• 旋轉裝置
• 開啟開發人員工具

前兩種情況會讓 CSS 捲動快照對使用者而言不那麼吸引人，而第三種情況則會讓開發人員在偵錯時遇到問題。此外，如要打造支援動作的動態體驗，例如新增、移除或移動內容等，開發人員也必須考量這些缺點。

這個問題的常見修正方式，是新增可透過 JavaScript 執行程式輔助捲動的事件監聽器，讓上述任何版面配置發生變更時，強制執行貼齊作業。如果使用者希望捲軸回到先前的內容，這個解決方法可能就沒效。因為只要進一步處理 JavaScript，幾乎不會導致這項 CSS 功能無法發揮作用。

Chrome 81 內建支援在版面配置變更後重新固定

Chrome 81 已解決上述缺點：即使變更版面配置，捲動條仍會保持固定。在變更版面配置後，系統會重新評估捲動位置，並視需要重新對齊最近的對齊位置。如果捲軸先前已固定到版面配置變更後仍存在的元素，則捲軸會嘗試回復至該元素。請留意在下列範例中，版面配置變更時會發生什麼情況。

失去連結位置

在 Chrome 80 中，旋轉裝置不會保留固定位置。捲動至標示為 NOPE 的幻燈片，並將裝置方向從直向變更為橫向後，畫面會顯示空白畫面，這表示捲動自動調整位置已遺失。

保留快照位置

旋轉裝置「確實」會在 Chrome 第 81 版中保留對齊位置。即使裝置方向變更多次，顯示「NOPE」的幻燈片仍會持續顯示。

詳情請參閱「重新對齊版面配置變更後的規格」。

注意： 網頁載入時，系統也會執行貼齊功能。這會影響使用捲動貼齊功能的捲軸初始捲動偏移量。

範例：固定捲軸條

透過「在版面配置變更後固定」功能，開發人員可以透過幾行 CSS 實作固定的捲軸：

.container {
  scroll-snap-type: y proximity;
}

.container::after {
  scroll-snap-align: end;
  display: block;
}

想要瞭解詳情嗎？請參閱下列聊天 UI 示範，瞭解相關視覺效果。

新增訊息會觸發重新固定，讓訊息在 Chrome 81 中固定在底部。

日後的工作

目前所有重新捕捉捲動效果都是即時的；未來可能會支援使用流暢捲動效果重新捕捉。詳情請參閱規格問題。

意見回饋

您的意見回饋對於改善版面配置變更後的重新對齊功能至關重要，因此請試用這項功能，並告訴 Chromium 工程師您的想法。