怎么通过HTML的CSS的::scroll-marker伪元素为轮播创建自动生成的指示器圆点-html教程-PHP中文网

不能。::scroll-marker 不生成 dom 节点，仅提供视觉标记层，需配合 scroll-marker-group 和 scroll-snap-type 才能激活，且仅在 chrome/edge 135+ 支持，safari 和 firefox 尚未实现。

怎么通过html的css的::scroll-marker伪元素为轮播创建自动生成的指示器圆点

不能。它不生成 DOM 节点，也不自动创建按钮或圆点；它只是为已存在的可滚动项（如 <li>、<section></section>）提供一个「视觉标记层」，需配合 scroll-marker-group 属性才能激活。

常见错误现象：写了 ::scroll-marker 但页面啥都没出现——大概率是没给容器加 scroll-marker-group，或者滚动容器里没有实际可滚动的子元素（比如 overflow: hidden 错误关闭了滚动上下文）。

必须在轮播容器上显式声明 scroll-marker-group: auto 或 scroll-marker-group: after（推荐 after，避免与内容流冲突）
每个轮播项（如 <li class="slide">）需是 scroll-marker-group 的直系子元素，且具备可滚动锚点能力（通常靠 id 或 scroll-snap-align 支持）
::scroll-marker 只在支持该特性的浏览器中生效（Chrome 135+、Edge 135+，Safari 尚未实现，Firefox 无计划支持）

它本身不画圆点，得靠 content + 尺寸 + 背景控制；关键在于利用 :target-current 伪类区分当前项。

实操建议：

给轮播容器设 scroll-marker-group: after，确保子项有 scroll-snap-align: center 和唯一 id（如 id="slide-0"）
对每个子项写 <li id="slide-0">...</li>，再配 CSS：li::scroll-marker { content: ""; display: block; width: 10px; height: 10px; border-radius: 50%; background: #ccc; margin: 0 4px; }
用 li::scroll-marker:target-current { background: #007bff; } 高亮当前项——注意这不是:hover，而是滚动后“稳定停驻”时的状态
别忘了给容器加 scroll-padding，否则 :target-current 可能因偏移失效

最常踩的坑是滚动行为没触发「稳定停驻」，导致 :target-current 始终不匹配。这和轮播实现方式强相关。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

使用场景限制：

纯 CSS animation 轮播（如 transform: translateX()）不产生真实滚动，::scroll-marker 完全无效
依赖 scroll-snap-type 的轮播才适用，必须开启 scroll-snap-type: x mandatory 并确保子项宽度/高度严格匹配容器
JS 控制的轮播（如 Bootstrap）若没调用 element.scrollIntoView({ behavior: "smooth", block: "nearest" })，也不会触发 :target-current
移动端 touch 滚动若没启用 touch-action: pan-x，可能被系统拦截，导致 snap 失效

目前（2026年5月）::scroll-marker 是实验性特性，无法作为唯一方案。必须准备降级。

推荐组合策略：

先用传统 <button data-bs-slide-to="0"></button> 实现 Bootstrap 指示器，确保功能可用
在支持 ::scroll-marker 的浏览器中，用 @supports (scroll-marker-group: auto) 包裹样式，隐藏原生按钮并启用伪元素圆点
不要试图用 JS 模拟 :target-current 行为——它和滚动帧率、snap 对齐精度深度耦合，JS 同步极易错位
如果项目必须强依赖指示器交互，优先选 scroll-snap + ::scroll-marker 组合，放弃 animation 轮播路线