CSS scroll-marker-group 怎样为横向滚动列表生成导航标记

做横向卡片列表时，导航点不一定要靠 JavaScript 监听 scroll 事件来维护。CSS 的 scroll-marker-group 可以让滚动容器生成 ::scroll-marker-group，子项的 ::scroll-marker 负责跳转，:target-current 负责标出当前页。核心前提是先把每个卡片做成明确的滚动停靠点，再处理标记的名称、焦点顺序和兼容降级。

先把每张卡片绑定到一个滚动停靠点

导航标记解决的是“跳到哪一页”，不是替代滚动容器。列表需要单行排列、允许横向滚动，并用 scroll-snap-type 和 scroll-snap-align 建立稳定的页面边界。下面的示例把一张卡片视为一个导航目标；注释保留了关键参数的用途。

概览
  
日志
  
告警


.carousel {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  /* 强制每次停在一个完整卡片，减少标记与内容错位。 */
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
}

.carousel > li {
  flex: 0 0 82%;
  /* 每个 li 成为一个可定位的滚动目标。 */
  scroll-snap-align: start;
}

用 scroll-marker-group 生成并布局导航组

在滚动容器上设置非 none 的值，浏览器才会生成标记组。after 适合把导航点放在卡片下方，before 适合放在内容上方；它不改变 DOM 树，却会影响布局盒顺序和 Tab 顺序。

.carousel {
  /* after 同时表达“内容后显示”和“焦点顺序靠后”。 */
  scroll-marker-group: after;
}

.carousel::scroll-marker-group {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-block-start: 12px;
}

.carousel > li::scroll-marker {
  /* 空字符串会丢失可访问名称，这里从 data 属性取文本。 */
  content: attr(data-acc-name);
  inline-size: 12px;
  block-size: 12px;
  border: 2px solid #34526f;
  border-radius: 50%;
  overflow: hidden;
  text-indent: 20px;
}

.carousel > li::scroll-marker:target-current {
  /* 当前标记填充后，读者能判断自己位于哪一页。 */
  background: #34526f;
}

这里的 content 不能省略。若只写宽高而没有生成内容，标记不会按预期出现；若写成空字符串，又可能得到没有可访问名称的控件。视觉上可以用 text-indent 隐藏名称，但名称仍应存在于生成内容中。

把视觉位置、键盘顺序和当前状态一起设计

before 与 after 不是单纯的上下位置开关。官方说明中，before 把标记组放到内容和滚动按钮之前，after 放到之后；对应的 Tab 顺序也会变化。因此导航点放在卡片底部时通常选 after，放在标题或卡片之前时选 before，不要只靠绝对定位把它“挪到看起来正确”。

当前状态由 :target-current 选择器表达，而不是通过脚本给某个元素补 class。键盘用户先把焦点移到标记组，再用方向键浏览页面；触摸用户仍可滑动，标记则提供直接跳转入口。若需要自定义文字名称，优先给每个 li 设置简短的 data-acc-name，不要把完整段落塞进标记。

兼容性边界：先允许滚动，再增强导航

MDN 将 scroll-marker-group 标为 Limited availability 和 Experimental，不能把它当作所有浏览器都支持的基础 CSS。稳妥的写法是让 overflow-x: auto、卡片宽度和 scroll-snap 先独立成立；不认识新属性的浏览器仍能横向滑动，只是没有生成导航点。需要统一的旧浏览器体验时，再用特性查询包住增强样式，或保留由框架输出的普通链接导航。

@supports (scroll-marker-group: after) {
  .carousel {
    /* 只在浏览器认识该属性时开启生成式导航。 */
    scroll-marker-group: after;
  }
}

/* 不支持时仍保留 overflow-x 和 scroll-snap 的基础体验。 */

常见问题

为什么设置了宽高，导航点仍然不出现？

先检查 scroll-marker-group 是否为 before 或 after，再检查 ::scroll-marker 的 content 是否为非 none。只写尺寸不会生成伪元素。

scroll-marker-group 和 scroll-target-group 有什么区别？

前者由滚动容器和子项自动生成标记伪元素；后者把已有的锚点链接组成标记组，DOM 和语义控制更直接，但需要自己维护标记结构。

能不能把它当作无障碍方案的全部内容？

不能。标记名称、焦点顺序、当前状态和不支持浏览器的降级都要同时考虑；生成式伪元素的具体行为仍应结合目标浏览器测试。