版面配置變更後捲動貼齊

從 Chrome 第 81 版開始,您不必再新增要強制執行的事件監聽器 重複性工作。

CSS 捲動貼齊 可讓網頁程式開發人員透過宣告 捲動貼齊位置目前導入的缺點之一是 版面配置變更時 (例如檢視點 或裝置已旋轉。Chrome 第 81 版已修正這個缺點。

互通性

許多瀏覽器都針對 CSS 捲動 Snap 提供基本支援。詳情請參閱「我可以使用 CSS 嗎? 要捲動 Snap 嗎?即可查看更多資訊。

Chrome 是目前唯一可在版面配置後實作捲動貼齊功能的瀏覽器 並輸入變更內容Firefox 有 ticket 開放購買: 這個外掛程式和 Safari 也有開啟 票券可在 捲動器的內容變更目前,您可以透過新增 將下列程式碼加入事件監聽器,以強制執行貼齊設定: javascript scroller.scrollBy(0,0); 但是,無法保證捲動器會回到相同的位置 元素。

背景

CSS 捲動貼齊

網頁程式開發人員可以利用 CSS 捲動貼紙功能 透過宣告捲動貼齊位置的方式來捲動體驗。這些位置 確保可捲動內容與容器正確對齊 克服捲動不精確的問題換句話說,捲動貼齊功能:

  • 避免捲動時出現尷尬的捲動位置。
  • 建立分頁內容的效果。

捲動文章和圖片輪轉介面是捲動畫面的兩種常見用途 相片。

CSS 捲動貼齊示例。
CSS 捲動貼齊示例。結尾 捲動圖片的水平中心對齊了水平置中對齊 直到捲動容器的整個過程

短缺

調整視窗大小時,貼齊位置會遺失。

捲動貼齊功能可讓使用者輕鬆瀏覽內容, 無法適應內容和版面配置的變更 好處如範例所示 上面提到的「使用者」必須調整視窗大小, 找出先前接合的元素。導致版面配置的常見情況 變更如下:

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

前兩個情況會降低 CSS 捲動 Snap 對使用者的吸引力。 第三是開發人員偵錯時遇到的難題開發人員也需要 因此要著重在提供切合需求的服務 支援新增、移除或移動內容等動作

此問題的常見修正方式是新增事件監聽器,透過這些事件監聽器執行程式輔助捲動 這類 JavaScript 會在上述任一版面配置中,強制執行貼齊作業 發生的變更當使用者預期 再貼回與之前相同的內容如果有進一步處理, JavaScript 似乎擊敗了這項 CSS 功能的使用目的。

Chrome 第 81 版內建支援在版面配置變更後重新貼齊的功能

Chrome 第 81 版已不存在上述缺點:系統將保留捲動器 就算是變更版面配置也一樣廣告單元會重新評估捲動位置, 變更版面配置,然後視需要 重新切換到最近的貼齊位置如果 捲動器先前對齊到 就會嘗試貼回物件版面配置。請留意 當版面配置在下列位置變更時會發生什麼情況 example)。

遺失貼齊位置
旋轉裝置「不會」保留 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 工程師 瞭解你 思考。