题干与适用场景
你要为产品卡片做横向轮播，希望浏览器原生生成前后滚动按钮和位置标记。请说明 CSS Overflow Module Level 5 的能力、无支持浏览器的回退、可访问性和验收指标。
CSS Overflow 5 定义了由滚动容器生成的 ::scroll-button() 与 ::scroll-marker 控件，以及 scroll-marker-group 分组方式。它仍处于浏览器逐步实现阶段，面试重点是能力边界与渐进增强，不是把实验特性当成全浏览器基线。
面试官考察点
面试官会看你能否区分滚动容器、滚动按钮和标记组；能否解释按钮的轴向选择、禁用状态与滚动行为；能否保留原生链接和键盘路径；能否给不支持该特性的浏览器提供可用回退；能否用真实设备和辅助技术验证，而不是只看视觉效果。
回答前需要澄清的问题
内容与布局
确认轮播是分页卡片、连续图库还是标签列表，单页显示几项，项目宽度是否固定，以及是否允许用户自由拖动滚动。
浏览器范围
确认目标浏览器、版本窗口、是否允许 JavaScript，以及产品是否接受实验特性在部分浏览器中隐藏。
交互与无障碍
确认键盘焦点顺序、屏幕阅读器对当前项的表达、触摸/滚轮操作、减少动态效果偏好和按钮不可用时的反馈。
30 秒回答框架
“我先用普通横向滚动容器和可聚焦的卡片建立基线，再在支持 CSS Overflow 5 的浏览器中开启 scroll-marker-group 与 ::scroll-button()。按钮只负责触发滚动，卡片本身仍有语义和键盘路径；我会提供 @supports selector(::scroll-button(*)) 的样式分支。无支持时保留原生滚动或小型 JavaScript 控件，并以键盘、屏幕阅读器、触摸和 reduced-motion 测试作为发布门槛。”
分步骤深入解答
第一步：建立可用基线
滚动容器先使用普通布局、overflow-x: auto、明确的滚动捕捉策略和可见焦点样式。每张卡片应有标题、链接或按钮，用户不依赖生成的标记才能到达内容。
第二步：开启原生控件
在支持的浏览器中设置滚动标记组，并用 ::scroll-button(left) 与 ::scroll-button(right) 生成前后控件。规范将按钮绑定到其来源滚动容器；按钮的可用性随是否还有可滚动内容变化，不能把它当作普通装饰伪元素。
.carousel {
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-marker-group: after;
}
.carousel::scroll-button(left),
.carousel::scroll-button(right) {
inline-size: 2.5rem;
block-size: 2.5rem;
}第三步：处理能力检测
用 @supports 或选择器能力检测包住增强样式。检测失败时不要隐藏滚动条、卡片或手写的替代控件；检测成功也要保留布局的正常尺寸，避免生成控件后改变内容可见范围。
第四步：保留语义与键盘路径
伪元素生成的按钮不应成为唯一操作入口。为焦点移动、Home/End、左右方向键和触摸滑动定义一致的行为；焦点进入不可见卡片时把它滚动到可见区域。屏幕阅读器应读到轮播名称、当前卡片和可执行动作，而不是只读“下一个”。
第五步：处理轴向与 RTL
按钮参数与滚动轴相关，不能把 left、right 直接等同于逻辑起点和终点。RTL、垂直书写模式和不同 writing mode 要单独验收；优先使用逻辑尺寸与逻辑间距，检查视觉方向和键盘方向是否一致。
第六步：设计回退
无支持时保留原生横向滚动；若产品需要显式按钮，再由 JavaScript 监听滚动位置并更新 disabled、当前项和 aria 状态。回退实现与增强实现共享卡片数据和语义，避免维护两套内容。
第七步：验证发布门槛
测试支持与不支持的浏览器、键盘、触摸、滚轮、缩放 200%、高对比度、屏幕阅读器和 prefers-reduced-motion。记录首屏可见卡片数、按钮误触率、焦点丢失、滚动延迟和回退覆盖率；只凭截图通过不能证明控件可用。
高质量示范回答
我会把普通横向滚动和卡片语义当作基线，再把 CSS Overflow 5 的按钮与标记作为增强层。支持时通过能力检测启用 scroll-marker-group 和 ::scroll-button()，不支持时仍可滚动，必要时启用小型 JavaScript 回退。生成按钮不能替代链接、焦点和屏幕阅读器语义；我会验证 RTL、垂直书写、禁用状态、焦点可见性、触摸和 reduced-motion。发布前用支持矩阵和真实辅助技术确认无论是否生成伪元素，用户都能到达每张卡片。
常见错误
- 错误表现： 把
::scroll-button()当成所有浏览器都存在的普通按钮。→ 失败原因： CSS Overflow 5 的实现仍在演进。→ 修正方法： 用能力检测，并保留原生滚动基线。 - 错误表现： 隐藏滚动条和卡片链接，只留下圆点标记。→ 失败原因： 键盘和辅助技术可能失去内容路径。→ 修正方法： 卡片语义独立成立，标记只是附加导航。
- 错误表现： 用物理 left/right 逻辑处理 RTL。→ 失败原因： 视觉方向、书写模式和逻辑方向可能不同。→ 修正方法： 在 RTL 与 vertical writing mode 中分别测试按钮、焦点和滚动结果。
- 错误表现： 只测鼠标点击。→ 失败原因： 无法发现焦点丢失、缩放溢出和 reduced-motion 问题。→ 修正方法： 把键盘、触摸、屏幕阅读器和 200% 缩放列为验收项。
追问及应对
::scroll-button() 与普通按钮有什么边界？
它由滚动容器生成并绑定滚动动作，样式和可用状态由滚动上下文决定。产品级自定义动作、分析埋点或复杂确认流程仍可能需要真实按钮或 JavaScript。
为什么还要保留原生滚动？
它是无增强环境的可用路径，也覆盖触摸、滚轮和用户偏好。增强控件失效时，用户仍能访问内容。
如何避免生成控件造成布局跳动？
预留控件空间，使用稳定的容器尺寸和逻辑间距，并在能力检测分支中比较首屏卡片数量与滚动捕捉位置。
什么时候不该采用这项特性？
当目标浏览器不支持、轮播需要复杂业务状态、或团队无法维护可靠回退时，使用普通滚动加成熟控件更稳妥；不要为了减少 JavaScript 而牺牲可达性。