從 Chrome 第 81 版開始,您不必再新增要強制執行的事件監聽器 重複性工作。
CSS 捲動貼齊 可讓網頁程式開發人員透過宣告 捲動貼齊位置目前導入的缺點之一是 版面配置變更時 (例如檢視點 或裝置已旋轉。Chrome 第 81 版已修正這個缺點。
互通性
許多瀏覽器都針對 CSS 捲動 Snap 提供基本支援。詳情請參閱「我可以使用 CSS 嗎? 要捲動 Snap 嗎?即可查看更多資訊。
Chrome 是目前唯一可在版面配置後實作捲動貼齊功能的瀏覽器
並輸入變更內容Firefox 有
ticket 開放購買:
這個外掛程式和 Safari 也有開啟
票券可在
捲動器的內容變更目前,您可以透過新增
將下列程式碼加入事件監聽器,以強制執行貼齊設定:
javascript
scroller.scrollBy(0,0);
但是,無法保證捲動器會回到相同的位置
元素。
背景
CSS 捲動貼齊
網頁程式開發人員可以利用 CSS 捲動貼紙功能 透過宣告捲動貼齊位置的方式來捲動體驗。這些位置 確保可捲動內容與容器正確對齊 克服捲動不精確的問題換句話說,捲動貼齊功能:
- 避免捲動時出現尷尬的捲動位置。
- 建立分頁內容的效果。
捲動文章和圖片輪轉介面是捲動畫面的兩種常見用途 相片。
![CSS 捲動貼齊示例。](https://web.developers.google.cn/static/articles/snap-after-layout/image/example-css-scroll-snap-b0e9b651c5dbf.png?authuser=19&hl=zh-tw)
短缺
捲動貼齊功能可讓使用者輕鬆瀏覽內容, 無法適應內容和版面配置的變更 好處如範例所示 上面提到的「使用者」必須調整視窗大小, 找出先前接合的元素。導致版面配置的常見情況 變更如下:
- 調整視窗大小
- 旋轉裝置
- 正在開啟開發人員工具
前兩個情況會降低 CSS 捲動 Snap 對使用者的吸引力。 第三是開發人員偵錯時遇到的難題開發人員也需要 因此要著重在提供切合需求的服務 支援新增、移除或移動內容等動作
此問題的常見修正方式是新增事件監聽器,透過這些事件監聽器執行程式輔助捲動 這類 JavaScript 會在上述任一版面配置中,強制執行貼齊作業 發生的變更當使用者預期 再貼回與之前相同的內容如果有進一步處理, JavaScript 似乎擊敗了這項 CSS 功能的使用目的。
Chrome 第 81 版內建支援在版面配置變更後重新貼齊的功能
Chrome 第 81 版已不存在上述缺點:系統將保留捲動器 就算是變更版面配置也一樣廣告單元會重新評估捲動位置, 變更版面配置,然後視需要 重新切換到最近的貼齊位置如果 捲動器先前對齊到 就會嘗試貼回物件版面配置。請留意 當版面配置在下列位置變更時會發生什麼情況 example)。
NOPE
的投影片,並變更裝置螢幕方向
空白畫面會顯示空白畫面
捲動貼齊位置遺失。
NOPE
仍會持續顯示在畫面上。
請參閱「在版面配置變更後重新貼齊 規格 詳細資料。
範例:固定式捲軸
啟用「在版面配置變更後貼齊」選項,開發人員只要稍微調整設定,就能實作固定式捲軸 CSS 供應商:
.container {
scroll-snap-type: y proximity;
}
.container::after {
scroll-snap-align: end;
display: block;
}
想要瞭解詳情嗎?請觀看以下的示範聊天室 UI。
日後的工作
所有重新貼齊的捲動效果目前都是立即完成;潛在後續追蹤是 透過流暢捲動的方式支援重新貼齊功能 「影響」 請參閱規格問題 。
意見回饋
版面配置變更之後,若能更妥善地重新包裝,您的意見回饋即可發揮重要作用,所以別放棄 然後試用看看,讓 Chromium 工程師 瞭解你 思考。