發布日期：2025 年 3 月 20 日
在 Chrome 135 以上版本中，您可以使用 CSS Overflow 5 規格的功能，這些功能是為了建立捲動和輪轉介面體驗而設計。
本文將概略說明使用這些新功能製作的多種捲動和輪轉介面，且不需使用 JavaScript。觀看以下影片，瞭解現在可達成的目標。
影片中展示了捲動按鈕、捲動標記、捲動驅動動畫、scroll-state() 查詢、:has()、格線、錨點等元素的和諧組合。
更令人驚豔的是無障礙功能。
工程團隊和無障礙團隊合作無間，讓瀏覽器能處理輪轉介面最佳做法。要做出比這更易於存取的輪轉介面，實在很難。
::scroll-button() 和 ::scroll-marker() 隆重登場！
輪轉介面是捲動區域，最多可新增兩個 UI 操作元素：按鈕和標記。
在 CSS 輪轉介面功能的第一個版本中，按鈕和標記是使用 CSS 建立的。瀏覽器會將元素設為同層元素，並以適當的分頁順序和適當的角色放置，同時維持元素狀態。這樣一來，開發無障礙輪轉介面就會更輕鬆。
捲動按鈕
瀏覽器提供的狀態和互動捲動操作元素<button>，可在按下時協助存取內容，並捲動 85% 的捲動區域。捲動標記
：瀏覽器提供的狀態導覽<a>元素，可協助捲動區域中任何要求項目的內容存取。
本文其餘部分將說明如何使用這些新功能建立輪轉介面。
從捲軸開始
您可以在網站的任何捲動區域中加入按鈕和標記。
以下 CSS 會建立基本捲動區域，供您在後續步驟中新增按鈕和標記。輪轉介面不需要捲動自動對齊，但在本範例中會使用這項功能。輪轉介面也適用於垂直捲動器和雙向捲動器。
.carousel {
overflow-x: auto;
scroll-snap-type: x mandatory;
> li {
scroll-snap-align: center;
}
}
使用 ::scroll-button() 新增捲動按鈕
視作業系統而定，捲動條周圍可能已提供捲動按鈕。內建捲軸按鈕傾向於調整捲動區域，而 CSS 捲動按鈕則會捲動 85% 的捲動區域。
如果輪轉介面只顯示一個全寬項目，且有捲動自動對齊點，就會讓人覺得這是一個項目，但數量不定。對於長清單項目 (一次顯示多個項目)，幾乎會捲動整個頁面。
如要使用 CSS 新增捲動按鈕，請按照下列步驟操作：
- 新增這些元素的方式與其他擬似元素相同，使用選取器：
.carousel::scroll-button(right)可讓按鈕向右捲動。 - 指定
content和選用的無障礙備用替代文字。
瀏覽器會建立實際按鈕，並將您的內容置於其中，做為捲軸的兄弟項目。您現在可以自由安排這些按鈕、設定樣式或anchor()。以下 CSS 會建立兩個按鈕，一個用於向左捲動，另一個用於向右捲動。
.carousel {
…
&::scroll-button(left) {
content: "⬅" / "Scroll Left";
}
&::scroll-button(right) {
content: "⮕" / "Scroll Right";
}
&::scroll-button(*)::focus-visible {
outline-offset: 5px;
}
}
使用 ::scroll-marker() 新增捲動標記
與捲軸滑動鈕元素類似，CSS 捲動標記可提示輪轉介面的大小，同時提供快速移動至結尾或開頭的操作空間。CSS 捲動標記與捲軸不同，因為每個標記都是連結，可代表捲軸中的任何項目。
舉例來說，電視影集的季別就是這類區別的例子。請不要為 10 個章節中的每個單元建立標記，而是建立 2 個標記，指向章節的開頭。
請注意，這些標記並非點，而是使用了其擬元素的 content: "Season 1" 屬性。標記也可以是縮圖，常用於電子商務或以相片為主的網站中的相片輪轉介面。
標記類似於網頁內的 <a> 連結，但具有一些特殊功能：
- 這些事件包含
:target-current狀態，可用於標記在檢視畫面中或已對齊時。 - 包含鍵盤導覽功能，並以 focusgroup 的形式運作。
- 包含螢幕閱讀器體驗，以及分頁清單等報表。
請按照下列步驟，在捲軸中為重要地點新增標記：
- 將
scroll-marker-group的刊登位置定義為before或after。 - 使用選取器
.carousel .point-of-interest::scroll-marker選取搜尋點。 - 指定
content時，可選填無障礙備用替代文字 (數字、文字、空白或圖片)。
瀏覽器會建立所有標記，並將標記放入標記群組容器。這個範例會為每個 <li> 建立空白標記，為每個項目建立標記點。
.carousel {
…
scroll-marker-group: after;
> li::scroll-marker {
content: ' ';
&:target-current {
background: var(--accent);
}
}
}
標記的包含元素稱為 ::scroll-marker-group，會以捲軸的兄弟元素建立，就像捲軸按鈕一樣。您可以為這個容器設定樣式，並將其放置在所需位置。
同時使用標記和按鈕
將兩者結合後，使用者體驗看起來就像輪播，但具備下列優點：
- 可在停用 JavaScript 的情況下運作。
- 不進行補充或延遲調整大小 (降低 CLS)。
- 支援各種捲動動畫和觸發事件。
- 包括無障礙功能。
- 適合觸控、滑鼠和鍵盤操作。
以更少的時間，觸及更多觀眾，提升成效
資源
本文主要將這些功能稱為「輪轉介面」，但這些功能的功能和用途遠遠超出輪轉介面的範圍。如要全面瞭解這些新功能的潛力，請試試輪轉式圖片庫，並查看其他元件，例如捲動圖示、分頁和幻燈片。
- 網路標準
- Chrome
輪轉介面設定工具
如果是視覺和互動式學習者，請試試輪轉介面設定工具。
它提供切換鈕 (例如捲動按鈕)，啟用後，輪轉介面會立即顯示按鈕，並使用相關的 CSS。
這份文件也包含輪播廣告相鄰的進階概念範例：
輪轉式圖片庫
展示空間：如果您想知道這些功能的使用範圍，可以在這裡找到答案，例如「這項功能可以做 X 嗎？」每個示範影片都以網際網路上的用途為基礎。每個示範都會說明如何透過捲動驅動動畫、scroll-state() 查詢等，協調這些按鈕和標記。
有趣的是，整個網站都沒有 JavaScript。
範例從簡單到功能豐富，應有盡有。瀏覽相片庫時，您應該能從中獲得靈感，並且能安心瀏覽，當然也能檢視程式碼。找出並檢查 @layer utilities 中的實用工具，瞭解如何製作輪轉介面。
後續工作
我們很自豪這些功能能完美整合所有 HTML 和 CSS。CSS 輪轉介面提供的無障礙功能非常出色。CSS 輪轉介面比任何 JavaScript 解決方案的效能都來得好。CSS 輪轉介面提供自然、流暢且豐富的使用者體驗。不過，您還是可以參考下列幾種方法來提高排名。
使用自有元素
我們已完成相關作業，讓您為捲動按鈕和標記新增專屬元件。也就是說，您可以提供自己的 <a> 標記，其中包含圖示等豐富內容。您也可以使用 Tailwind 建立自己的多層按鈕。
循環捲動
許多輪轉介面會在抵達終點後自動循環，就像嘉年華會場的旋轉木馬。我們正在研究這項問題，並打算提供平台解決方案。
希望你喜歡這項功能。我們期待所有「JavaScript 已停用」的網頁使用者，都能享有流暢的捲動體驗，並透過內建輪轉介面的最佳化時間生命週期，減少 CLS。
您不必費心，使用者體驗佳，成效也更好。