使用 CSS 的輪轉介面

Adam Argyle

發布日期：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 新增捲動按鈕，請按照下列步驟操作：

1. 新增方式與其他虛擬元素相同，使用選取器：.carousel::scroll-button(right)，按鈕即可向右捲動。
2. 指定 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 捲動標記與捲軸不同，因為每個標記都是連結，可代表捲動器中的任何項目。

以電視影集為例，每一季都是一個獨立的節目。請建立 2 個標記，分別前往章節開頭，而不是為 10 集節目各建立一個標記。

請注意，這些標記不是點，而是使用虛擬元素的 content: "Season 1" 屬性。標記也可以是縮圖，通常用於電子商務或以相片為主的網站中的圖片庫輪播。

標記類似於網頁內 <a> 連結，但具有一些特殊功能：

1. 包括標記顯示或貼齊時的 :target-current 狀態。
2. 內含鍵盤導覽功能，運作方式與 focusgroup 類似。
3. 包括螢幕閱讀器體驗，以及類似分頁清單的報表。

如要在捲軸中加入重要景點的標記，請按照下列步驟操作：

1. 將 scroll-marker-group 的位置定義為 before 或 after。
2. 使用選取器 .carousel .point-of-interest::scroll-marker 選取搜尋點。
3. 指定 content，並提供選用的無障礙備用替代文字；數字、文字、空白或圖片。

瀏覽器會建立所有標記，並將其放入標記群組容器。這個範例會為每個 <li> 建立空白標記，為每個項目建立標記點。

.carousel {
  …

  scroll-marker-group: after;
  
  > li::scroll-marker {
    content: ' ';
  }

  > li::scroll-marker:target-current {
    background: var(--accent);
  }
}

標記的容器元素稱為 ::scroll-marker-group，會建立為捲軸的同層級元素，就像捲動按鈕一樣。這個容器可以設定樣式，並放置在所需位置。

同時按下標記和按鈕

將兩者結合，即可獲得類似輪轉介面的體驗，但具備下列優點：

• 即使停用 JavaScript 也能運作。
• 不需補水或延遲調整大小 (減少 CLS)。
• 適用於各種捲動動畫和觸發條件。
• 包括無障礙功能。
• 支援觸控、滑鼠和鍵盤操作。

事半功倍，觸及更多目標對象。

資源

本文大多將這些功能稱為「輪播」，但其功能和實用性遠遠超出輪播用途。如要全面瞭解這些新功能的潛力，請試用輪轉式圖片庫，並查看其他元件，例如捲動偵測、分頁和投影片。

• 網路標準
  • CSS Overflow 5
  • 輪轉介面說明
  • WAI Aria Carousel
• Chrome
  • 出貨意願
  • 輪轉式圖片庫
  • 輪轉介面設定工具

輪轉介面設定器

如果是視覺和互動式學習者，請試用輪轉介面設定工具。

提供切換鈕 (例如捲動按鈕)，啟用後顯示的輪轉介面會立即顯示按鈕，以及使用的相關 CSS。

此外，也包含與輪播相關的進階概念範例：

• 互動性
• scroll-state
• 捲動驅動動畫
• 和捲動貼齊資料欄

輪轉式圖片庫

展示空間：讓有興趣的人瞭解這些功能可以做到什麼程度，並解答「可以執行 X 嗎？」等問題。每個示範都是根據網路上找到的用途而設計。每個範例都會說明如何使用捲動驅動動畫、scroll-state() 查詢等方式，協調這些按鈕和標記。

有趣的是，整個網站都沒有使用 JavaScript。

這些範例從簡單到複雜都有，功能豐富且強大。瀏覽範本庫時，您應該會感到鼓舞、安心，當然也可以檢查程式碼並加以運用。尋找並檢查 @layer utilities，瞭解有哪些實用工具可協助製作輪播內容。

後續作業

我們很自豪這些功能與所有 HTML 和 CSS 都能完美整合。CSS 輪轉介面提供頂尖的無障礙功能。CSS 輪播的效能優於任何 JavaScript 解決方案。CSS 輪播功能提供自然、流暢且豐富的使用者體驗。不過，還是有改善方法。

自備元素

我們正在努力，讓您能為捲動按鈕和標記新增自己的元件。也就是說，您可以提供自己的 <a> 標記，其中包含圖示等豐富內容。您也可以使用 Tailwind 打造自己的多層按鈕。

循環捲動

許多輪播項目在到達結尾時會自行環繞，就像遊樂園的旋轉木馬一樣。我們已注意到這個問題，並打算提供平台解決方案。

希望你喜歡這項功能。我們期待所有「已停用 JavaScript」的網路使用者都能享有良好的捲動體驗，並透過內建輪轉介面更適時的生命週期，減少 CLS。

減少工作量、提供優質使用者體驗、提升成效。