::scroll-marker-group

語法

::scroll-marker-group {
  /* ... */
}

描述

滾動容器的 ::scroll-marker-group 偽元素代表一個滾動標記組容器。這是一個自動包含其自身或其後代上生成的任何 ::scroll-marker 偽元素的容器。這使得它們可以作為一個組進行定位和樣式化。這個偽元素通常在建立 CSS 輪播圖以提供滾動位置指示器時使用。各個滾動標記可用於導航到其關聯的內容項。

滾動容器的 scroll-marker-group 屬性必須設定為非 none 的值，才能生成 ::scroll-marker-group 偽元素。scroll-marker-group 的值決定了滾動標記組容器在輪播圖的 Tab 鍵順序和佈局盒順序中的位置（但不是 DOM 結構）——before 將其放在開頭，而 after 將其放在末尾。

作為無障礙最佳實踐，應將滾動標記組容器的視覺渲染位置與 Tab 鍵順序相匹配。當將該組定位在內容開頭時，使用 before 將其放在 Tab 鍵順序的開頭。當將該組定位在內容末尾時，使用 after 將其放在 Tab 鍵順序的末尾。

當使用 scroll-marker-group 屬性在滾動容器上建立滾動標記組容器時，該滾動容器會以 tablist/tab 語義進行渲染。你可以用鍵盤 Tab 鍵切換到它，然後使用左、右（或上、下）游標鍵在不同的“頁面”之間移動，這也會如預期般改變相關滾動標記和滾動按鈕的狀態。滾動標記之間也可以像預期的那樣正常地用 Tab 鍵切換。

示例

有關使用 ::scroll-marker 偽元素的其他示例，請參閱建立 CSS 輪播圖。

建立輪播圖滾動標記

此演示是一個單頁輪播圖，每個專案都佔據整個頁面。我們加入了滾動標記，以便使用者可以透過點選標記導航到任何頁面。

HTML

HTML 包含一個無序列表，每個列表項包含一些示例內容。

<ul>
  <li>
    <h2>Page 1</h2>
  </li>
  <li>
    <h2>Page 2</h2>
  </li>
  <li>
    <h2>Page 3</h2>
  </li>
  <li>
    <h2>Page 4</h2>
  </li>
</ul>

CSS

我們首先透過將 display 設定為 flex，將 <ul> 轉換為輪播圖，從而建立一行不換行的 <li> 元素。將 overflow-x 屬性設定為 auto，意味著如果專案在 x 軸上溢位其容器，內容將水平滾動。然後，我們透過設定 scroll-snap-type 值為 mandatory，將 <ul> 轉換為滾動捕捉容器，確保在容器滾動時專案總是能捕捉到位。

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Helvetica", "Arial", sans-serif;
}

ul {
  display: flex;
  gap: 4vw;
  padding-left: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
}

接下來，我們為 <li> 元素設定樣式，使用 flex 屬性使它們的寬度為容器的 100%。scroll-snap-align 的值為 start，這使得當內容滾動時，最左側可見項的左側會捕捉到容器的左邊緣。

li {
  list-style-type: none;
  background-color: #eeeeee;
  flex: 0 0 100%;
  height: 200px;
  padding-top: 20px;
  scroll-snap-align: start;
  text-align: center;
}

接下來，列表的 scroll-marker-group 屬性被設定為 after，因此 ::scroll-marker-group 偽元素在 Tab 鍵順序和佈局盒順序中被放置在列表的 DOM 內容之後；這意味著它位於滾動按鈕之後。

ul {
  scroll-marker-group: after;
}

接下來，列表的 ::scroll-marker-group 偽元素使用 flexbox 進行佈局，其 justify-content 值為 center，gap 為 20px，這樣它的子元素（::scroll-marker 偽元素）就能在 ::scroll-marker-group 內部居中，並且每個標記之間有間距。

ul::scroll-marker-group {
  display: flex;
  justify-content: center;
  gap: 20px;
}

接下來，對滾動標記本身進行樣式設定。透過設定 width、height、background-color、border 和 border-radius 來處理每個標記的外觀，但我們還需要為 content 屬性設定一個非 none 的值，以便它們能夠真正生成。

li::scroll-marker {
  width: 16px;
  height: 16px;
  background-color: transparent;
  border: 2px solid black;
  border-radius: 50%;
  content: "";
}

最後，使用 :target-current 偽類來選擇與當前可見“頁面”對應的滾動標記，以高亮顯示使用者已滾動瀏覽內容的進度。在本例中，我們將其 background-color 設定為 black，使其樣式為一個實心圓。

li::scroll-marker:target-current {
  background-color: black;
}

結果

使用錨點定位來定位滾動標記組容器

這個例子擴充套件了前一個例子，演示瞭如何使用CSS 錨點定位來相對於輪播圖定位滾動標記組容器。

CSS

列表的 ::scroll-marker-group 偽元素透過 CSS 錨點定位相對於輪播圖進行定位，方法是為該組設定一個與 <ul> 的 anchor-name 匹配的 position-anchor 值。然後，我們透過設定一個包含 anchor() 函式的 top 值，在塊方向上相對於滾動容器定位該組。我們還添加了一個 justify-self 值為 anchor-center，這會在內聯方向上將該組對齊到滾動容器的中心。

ul {
  anchor-name: --my-carousel;
}

ul::scroll-marker-group {
  /* From the previous example */
  display: flex;
  gap: 20px;

  position: absolute;
  position-anchor: --my-carousel;
  top: calc(anchor(bottom) - 70px);
  justify-self: anchor-center;
}

結果

規範

瀏覽器相容性

另見

• scroll-marker-group
• scroll-target-group
• ::scroll-button()
• ::scroll-marker
• ::column
• :target-current
• 建立 CSS 輪播
• CSS anchor positioning 模組
• CSS overflow 模組
• CSS 輪播庫 via chrome.dev (2025)