::scroll-marker

语法

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

描述

当 ::scroll-marker 的 content 属性设置为非 none 值，并且其祖先滚动容器的 scroll-marker-group 属性值为非 none（这意味着它将生成一个 ::scroll-marker-group 伪元素）时，该元素上会生成一个 ::scroll-marker。

滚动容器的 ::scroll-marker-group 伪元素自动包含在滚动容器或其后代上生成的任何 ::scroll-marker 伪元素。这使得它们可以作为一组进行定位和布局，通常用于创建 CSS 轮播以创建滚动位置指示器。各个滚动标记可用于导航到其关联的内容项。

当在滚动容器上使用 scroll-marker-group 属性创建滚动标记组容器时，滚动容器会以 tablist/tab 语义进行渲染。您可以使用键盘的 Tab 键跳到它，然后使用左右（或上下）光标键在不同的“页面”之间移动，这也会按预期更改关联的滚动标记和滚动按钮的状态。滚动标记也可以按预期正常地在 Tab 键之间切换。

示例

有关使用 ::scroll-marker 伪元素的其他示例，请参阅创建 CSS 轮播。

创建轮播滚动标记

在此示例中，我们演示了如何在 CSS 轮播上创建滚动标记。

HTML

我们有一个基本的 HTML <ul> 列表，包含几个 <li> 列表项。

<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 属性创建了一个滚动标记组容器，并将其放置在所有内容之后。

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 会导致最左侧可见项的左侧边缘吸附到容器的左边缘。

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 伪元素为每个列表项创建一个带有红色边框的正方形标记。

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

我们还对 ::scroll-marker-group 伪元素应用样式，以将滚动标记布局在行的中心，每个标记之间有 0.4em 的间隙。

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

最后，我们使用 :target-current 伪类定位当前滚动元素的标记，使其样式与其他标记不同。

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

结果

自定义滚动标记编号和样式

此示例与上一个示例相同，只是我们对滚动标记应用了一些不同的样式，并使用 CSS 计数器来递增每个标记上显示的数字。CSS 差异将在下一节中解释。

CSS

在此示例中，我们使用 counter-increment 属性，为每个 <li> 设置一个要递增的计数器名称——markers。

li {
  counter-increment: markers;
}

然后，我们将 ::scroll-marker 伪元素的 content 属性设置为 counter() 函数，并将 markers 计数器名称作为参数传递给它。这会为每个标记插入一个自动递增的数字。其余的样式是基本的，但它说明了标记如何可以完全自定义样式。

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”。

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

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

为了改善用户体验，我们在 :hover 时为标记设置了不同的颜色，并使用 :target-current 伪类为当前滚动元素的标记设置了不同的 color 和 background-color，以便用户知道当前显示的是哪个项目。

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

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

结果

规范

浏览器兼容性

另见

• scroll-marker-group
• scroll-target-group
• ::scroll-button()
• ::scroll-marker-group
• :target-current
• 创建 CSS 轮播
• CSS 列表和计数器模块
• CSS overflow 模块
• CSS 轮播库 via chrome.dev (2025)