1. Web
  2. CSS
  3. ::scroll-marker

::scroll-marker

可用性有限

此特性不是基線特性，因為它在一些最廣泛使用的瀏覽器中不起作用。

實驗性： 這是一項實驗性技術
在生產中使用此技術之前，請仔細檢查瀏覽器相容性表格。

::scroll-marker CSS 偽元素可以在任何元素內部生成，並代表其滾動標記。所有元素都可以擁有 ::scroll-marker 偽元素，它被放置在最近的滾動容器祖先的 ::scroll-marker-group 中。滾動標記的行為類似於錨點（<a> 元素），其滾動目標是標記的原始元素——並在啟用時將滾動容器滾動到該元素。

語法

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

描述

當 ::scroll-marker 的 content 屬性設定為非 none 值，並且其祖先滾動容器的 scroll-marker-group 屬性值為非 none（這意味著它將生成一個 ::scroll-marker-group 偽元素）時，該元素上會生成一個 ::scroll-marker。

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

注意：或者，可以使用 scroll-target-group 從現有元素容器建立滾動標記組容器；任何包含的帶有連結到頁面片段識別符號的 <a> 元素都會自動錶現為滾動標記。

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

示例

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

在此示例中，我們演示瞭如何在 CSS 輪播上建立滾動標記。

HTML

我們有一個基本的 HTML <ul> 列表，包含幾個 <li> 列表項。

html
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
  <li>Item 8</li>
</ul>

CSS

我們透過將 display 設定為 flex，將我們的 <ul> 轉換為一個滾動吸附溢位容器，建立了一個不換行的單行 <li> 元素。overflow-x 屬性設定為 auto，這意味著如果專案在 x 軸上溢位其容器，內容將水平滾動。然後，我們透過將 scroll-snap-type 值設定為 mandatory，將 <ul> 轉換為一個滾動吸附容器，確保在滾動容器時專案始終吸附到位。

我們使用 scroll-marker-group 屬性建立了一個滾動標記組容器，並將其放置在所有內容之後。

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

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

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

然後，我們使用 ::scroll-marker 偽元素為每個列表項建立一個帶有紅色邊框的正方形標記。

css
li::scroll-marker {
  content: "";
  border: 1px solid red;
  height: 1em;
  width: 1em;
}

我們還對 ::scroll-marker-group 偽元素應用樣式，以將滾動標記佈局在行的中心，每個標記之間有 0.4em 的間隙。

css
::scroll-marker-group {
  display: flex;
  gap: 0.4em;
  place-content: center;
}

最後，我們使用 :target-current 偽類定位當前滾動元素的標記，使其樣式與其他標記不同。

css
::scroll-marker:target-current {
  background: red;
}

結果

自定義滾動標記編號和樣式

此示例與上一個示例相同，只是我們對滾動標記應用了一些不同的樣式，並使用 CSS 計數器來遞增每個標記上顯示的數字。CSS 差異將在下一節中解釋。

CSS

在此示例中，我們使用 counter-increment 屬性，為每個 <li> 設定一個要遞增的計數器名稱——markers。

css
li {
  counter-increment: markers;
}

然後，我們將 ::scroll-marker 偽元素的 content 屬性設定為 counter() 函式，並將 markers 計數器名稱作為引數傳遞給它。這會為每個標記插入一個自動遞增的數字。其餘的樣式是基本的，但它說明了標記如何可以完全自定義樣式。

css
li::scroll-marker {
  content: counter(markers);
  font-family: sans-serif;
  width: fit-content;
  height: 1em;
  padding: 5px;
  color: black;
  text-decoration: none;
  border: 2px solid rgb(0 0 0 / 0.15);
  border-radius: 0.5em;
  background-color: #eeeeee;
}

為了另一個有趣的自定義，我們包含兩條規則，透過分別將 :first-child 和 :last-child 插入到選擇器鏈中來選擇第一個和最後一個列表項的標記。我們將第一個標記的文字內容設定為“First”，將最後一個標記的文字內容設定為“Last”。

css
li:first-child::scroll-marker {
  content: "First";
}

li:last-child::scroll-marker {
  content: "Last";
}

為了改善使用者體驗，我們在 :hover 時為標記設定了不同的顏色，並使用 :target-current 偽類為當前滾動元素的標記設定了不同的 color 和 background-color，以便使用者知道當前顯示的是哪個專案。

css
::scroll-marker:hover {
  background-color: #ddcccc;
}

::scroll-marker:target-current {
  background-color: purple;
  color: white;
}

結果

規範

規範
CSS Overflow Module Level 5
# scroll-marker-pseudo

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

此頁面最後由MDN 貢獻者在修改。

在 GitHub 上檢視此頁面 • 報告此內容的問題
© . Content available under a Creative Commons license.