::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)