scroll-target-group - CSS | MDN

語法

css

/* Keyword values */
scroll-target-group: none;
scroll-target-group: auto;

/* Global values */
scroll-target-group: inherit;
scroll-target-group: initial;
scroll-target-group: revert;
scroll-target-group: revert-layer;
scroll-target-group: unset;

scroll-target-group 屬性指定為以下關鍵字值之一：

值

none: 該元素不是滾動標記組容器。
auto: 該元素是滾動標記組容器。

描述

將元素的 scroll-target-group 設定為 auto，表示它是一個滾動標記組容器。這會將一組導航項組合在一起，允許使用者在頁面上的元素之間導航（例如輪播項或文章部分），並突出顯示當前正在檢視中的元素。

容器內帶有片段識別符號的任何 <a> 元素都會自動設定為滾動標記。滾動目標當前在檢視中的錨點元素可以透過 :target-current 偽類進行樣式設定。

`scroll-target-group` 和 `scroll-marker-group` 之間的區別

使用 scroll-target-group 建立的滾動標記組容器的行為與使用 scroll-marker-group 屬性建立的容器非常相似，但有一些區別：

使用 scroll-target-group，您必須建立自己的標記來表示滾動標記組容器和滾動標記，而 scroll-marker-group 會自動建立一組偽元素來表示容器（::scroll-marker-group）和標記（一個或多個 ::scroll-marker 例項）。這些偽元素會自動與它們生成的滾動容器建立預期的導航關聯。使用 scroll-marker-group 可以更快地進行設定，因為您不需要使用自己的標記。然而，透過 scroll-target-group 建立自己的標記並將其設定為滾動標記組容器提供了更多的控制和靈活性。
透過 scroll-target-group 指定為滾動標記的連結沒有特殊的導航行為，而透過 scroll-marker-group 生成的標記會自動應用 tablist/tab 語義，這意味著它們在 Tab 鍵順序中表現為單個項，使用者可以使用箭頭鍵在滾動標記之間移動。同樣，scroll-marker-group 提供了有用的預設行為，但您可以靈活地為使用 scroll-target-group 指定的標記提供替代語義和行為。

正式語法

scroll-target-group = 
  none  |
  auto

示例

`scroll-target-group` 的基本用法

此示例顯示了一個頁面，其中包含連結到不同部分的目錄。

HTML

我們的標記包含一系列包含內容的 <section> 元素，以及一個使用有序列表（<ol>/<li>）和 <a> 元素建立的目錄。

html

<nav id="toc">
  <ol>
    <li><a href="#intro">Introduction</a></li>
    <li><a href="#ch1">Chapter 1</a></li>
    <li><a href="#ch2">Chapter 2</a></li>
    <li><a href="#ch3">Chapter 3</a></li>
    <li><a href="#ch4">Chapter 4</a></li>
  </ol>
</nav>
<section id="intro" class="chapter">
  <h1>Prose of the century</h1>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
    aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
    pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at
    ultricies tellus laoreet sit amet.
  </p>
</section>
<section id="ch1" class="chapter">
  <h2>Chapter 1</h2>

  <!-- ... -->
</section>
<section id="ch2" class="chapter">
  <h2>Chapter 2</h2>

  <!-- ... -->
</section>

<!-- ... -->

<nav id="toc">
  <ol>
    <li><a href="#intro">Introduction</a></li>
    <li><a href="#ch1">Chapter 1</a></li>
    <li><a href="#ch2">Chapter 2</a></li>
    <li><a href="#ch3">Chapter 3</a></li>
    <li><a href="#ch4">Chapter 4</a></li>
  </ol>
</nav>
<section id="intro" class="chapter">
  <h1>My story</h1>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
    aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
    pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at
    ultricies tellus laoreet sit amet.
  </p>
</section>
<section id="ch1" class="chapter">
  <h2>Chapter 1</h2>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
    aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
    pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at
    ultricies tellus laoreet sit amet.
  </p>
  <p>
    Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet
    orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare
    ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat.
    Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra
    congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus
    varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.
  </p>
  <p>
    Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
    ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
    est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus
    tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies
    lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis
    vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque
    penatibus et magnis dis parturient montes, nascetur ridiculus mus.
  </p>
</section>
<section id="ch2" class="chapter">
  <h2>Chapter 2</h2>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
    aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
    pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at
    ultricies tellus laoreet sit amet.
  </p>
  <p>
    Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet
    orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare
    ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat.
    Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra
    congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus
    varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.
  </p>
</section>
<section id="ch3" class="chapter">
  <h2>Chapter 3</h2>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
    aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
    pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at
    ultricies tellus laoreet sit amet.
  </p>
  <p>
    Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet
    orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare
    ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat.
    Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra
    congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus
    varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.
  </p>
</section>
<section id="ch4" class="chapter">
  <h2>Chapter 4</h2>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
    aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
    pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at
    ultricies tellus laoreet sit amet.
  </p>
  <p>
    Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet
    orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare
    ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat.
    Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra
    congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus
    varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.
  </p>
</section>

CSS

為了簡潔起見，我們省略了大部分樣式。與此示例最相關的是，我們在 <ol> 上設定了 scroll-target-group: auto，將其轉換為滾動標記組容器，並觸發瀏覽器演算法來計算在任何給定時間哪個 <a> 元素是 :target-current（即，哪個連結的目標當前在檢視中）。然後，我們使用 red color 為 :target-current 偽類設定樣式，使其清晰可見。

body {
  font: 1.2em / 1.5 system-ui;
  width: 50%;
  max-width: 700px;
  margin: 0 auto;
}

nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
}

section {
  padding-top: 60px;
}

a {
  color: black;
  text-decoration: none;
}

a:hover,
a:focus {
  text-decoration: underline;
}

ol {
  display: flex;
  width: 100%;
  justify-content: space-around;
  list-style-type: none;
  padding: 20px 0;
  margin: 0;
  background: white;
}

css

ol {
  scroll-target-group: auto;
}

:target-current {
  color: red;
}

結果

嘗試透過啟用連結和滾動來導航。您會看到在每種情況下，紅色高亮都會在連結之間移動，以匹配當前顯示的章節。

帶有 `scroll-target-group` 滾動標記的 CSS 輪播

此示例展示瞭如何使用 scroll-target-group 建立 CSS 輪播滾動標記。此示例的程式碼與我們的單頁輪播示例類似；我們只在下面解釋不同之處。

HTML

標記在定義每個頁面的列表項上設定了 ID，並添加了一個有序列表，我們將使用 CSS 將其轉換為滾動標記組容器。

html

<h1>CSS carousel single item per page</h1>
<ul>
  <li id="page1">
    <h2>Page 1</h2>
  </li>
  <li id="page2">
    <h2>Page 2</h2>
  </li>
  <li id="page3">
    <h2>Page 3</h2>
  </li>
  <li id="page4">
    <h2>Page 4</h2>
  </li>
</ul>
<ol>
  <li><a href="#page1">1</a></li>
  <li><a href="#page2">2</a></li>
  <li><a href="#page3">3</a></li>
  <li><a href="#page4">4</a></li>
</ol>

CSS

我們透過在 <ol> 元素上設定 scroll-target-group 來建立滾動標記組容器和滾動標記。其餘的樣式程式碼非常相似，不同之處在於我們選擇自己的元素（<ol> 和 <a>），而不是 ::scroll-marker-group 和 ::scroll-marker 偽元素。

我們透過在 :target-current、a:hover 和 a:focus 狀態上設定一些樣式來完成程式碼，以指示當前顯示的頁面以及正在懸停/聚焦的連結。

/* General styles */

* {
  box-sizing: border-box;
}

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

h1 {
  text-align: center;
}

button {
  background-color: white;
}

/* General styling of list as scrolling carousel */

ul {
  width: 100%;
  height: 400px;
  padding: 20px;
  gap: 4%;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
}

ul li {
  list-style-type: none;
  background-color: #eeeeee;
  border: 1px solid #dddddd;
  padding: 20px;

  scroll-snap-align: center;
}

/* CSS scroll buttons */

/* Style the scroll buttons */

ul::scroll-button(*) {
  border: 0;
  font-size: 2rem;
  background: none;
  color: rgb(0 0 0 / 0.7);
  cursor: pointer;
}

ul::scroll-button(*):hover,
ul::scroll-button(*):focus {
  color: black;
}

ul::scroll-button(*):active {
  translate: 1px 1px;
}

ul::scroll-button(*):disabled {
  color: rgb(0 0 0 / 0.2);
}

ul::scroll-button(left) {
  content: "◄";
}

ul::scroll-button(right) {
  content: "►";
}

/* Position the scroll buttons */

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

ul::scroll-button(*) {
  position: absolute;
  position-anchor: --my-carousel;
}

ul::scroll-button(left) {
  right: calc(anchor(left) - 70px);
  top: calc(anchor(bottom) - 80px);
}

ul::scroll-button(right) {
  left: calc(anchor(right) - 70px);
  top: calc(anchor(bottom) - 80px);
}

css

ol {
  position: absolute;
  position-anchor: --my-carousel;
  top: calc(anchor(bottom) - 90px);
  justify-self: anchor-center;
  display: flex;
  justify-content: center;
  gap: 20px;

  list-style-type: none;
  padding: 0;
  scroll-target-group: auto;
}

ol a {
  width: 28px;
  height: 28px;
  display: inline-block;
  text-align: center;
  text-decoration: none;
  padding-top: 4px;
  color: black;
  background-color: transparent;
  border: 2px solid black;
  border-radius: 50%;
}

ol a:hover,
ol a:focus,
:target-current {
  background-color: black;
  color: white;
}

結果

嘗試透過以下三種方式進行導航：啟用滾動標記連結，水平滾動，或按下兩側的滾動按鈕。您會看到在每種情況下，高亮都會在連結之間移動，以匹配當前顯示的章節。

規範

規範
CSS Overflow Module Level 5 # scroll-target-group

瀏覽器相容性

另見

scroll-marker-group
::scroll-marker-group 和 ::scroll-marker 偽元素
:target-current 偽類
建立 CSS 輪播
CSS overflow 模組

幫助改進 MDN

瞭解如何貢獻

此頁面由 MDN 貢獻者在 2025 年 10 月 13 日最後修改。

在 GitHub 上檢視此頁面 • 報告此內容的問題