题干与适用场景
页面有一组指向文章章节或轮播项目的链接，希望在滚动时突出当前目标。CSS scroll-target-group 可以把已有导航容器声明为滚动标记组，让链接目标与当前可见内容建立关系。题目要求你说明它与脚本 IntersectionObserver、传统锚点和 scroll-marker-group 的边界，并设计渐进增强。
面试官考察点
面试官会观察你是否先保留可用的真实链接，再考虑 CSS 负责的视觉和状态表达。强回答会区分滚动位置、焦点位置和当前项样式，处理重复目标、动态内容、横向滚动与减少动效偏好，并说明实验性属性不可用时的回退。只展示一个 CSS 声明，无法证明导航可操作。
回答前需要澄清的问题
导航目标是什么
确认每个链接是否指向稳定的章节 ID、轮播卡片或虚拟列表项目。目标必须可被浏览器解析，且不会因重新排序而改变语义。
当前项如何定义
明确是进入视口、达到阈值、获得焦点，还是用户最后点击的项目。滚动状态与焦点状态可能不同，不能用一个颜色规则假设两者相同。
支持范围与替代方案
列出目标浏览器、屏幕阅读器和键盘需求。scroll-target-group 属于实验性能力，传统链接和必要的脚本观察仍要可独立工作。
30 秒回答框架
“我先用语义化导航和稳定锚点保证基本跳转，再把导航容器声明为 scroll-target-group，让目标进入视口时可以应用当前项样式。滚动标记不负责焦点管理，我会单独测试 Tab、跳转后的焦点和返回路径；动态内容则在目标创建后重新验证。对不支持该属性的浏览器，我保留普通链接和必要的 IntersectionObserver 逻辑，并用键盘、屏幕阅读器、横向滚动和减少动效设置做端到端测试。”
分步骤深入解答
第一步：建立稳定锚点
为每个章节或项目生成唯一、可预测的 ID，导航链接使用真实片段目标。避免只依赖数组索引，因为筛选、分页和服务端渲染会改变索引。
第二步：声明滚动标记组
在支持的浏览器中，将目录或轮播控制容器设置为 scroll-target-group: auto。这一步让容器中的片段链接可以参与滚动标记关系，但不会自动替你设计焦点或语义。
第三步：区分当前样式与焦点样式
使用当前目标伪类或等效状态表现滚动位置，使用 :focus-visible 表现键盘焦点。两者同时存在时应保证对比度、动画和文字标签都清楚。
第四步：处理动态和多容器场景
章节加载、轮播循环或嵌套滚动容器变化后，重新检查目标是否唯一、当前项是否稳定。避免同一个链接被多个滚动容器解释，必要时拆分导航组。
第五步：设计回退与验证
不支持属性时，普通锚点必须仍能跳转；若需要当前项指示，可用 IntersectionObserver 作为增强。测试键盘、屏幕阅读器、浏览器返回、缩放、横向滚动和 prefers-reduced-motion。
高质量示范回答
我会先为文章章节生成稳定 ID，使用真实的目录链接，保证没有 CSS 时也能跳转。若目标浏览器支持，我会在目录容器上设置 scroll-target-group: auto，用当前目标状态突出正在阅读的章节，同时用 :focus-visible 保持键盘焦点可见。滚动标记不负责把焦点强行移动到内容，因此跳转后我会验证焦点策略和返回路径。对于无限加载或轮播，我会在新增目标后检查 ID 唯一性和当前项稳定性。不支持该属性时保留锚点，并用观察器补充状态；最后在桌面、移动、屏幕阅读器和减少动效设置下完成任务测试。
常见错误
- 错误表现： 只有 CSS 状态，没有真实锚点链接。→ 失败原因： 不支持浏览器和辅助技术失去导航路径。→ 修正方法： 先构建可独立工作的语义链接。
- 错误表现： 把当前可见项等同于键盘焦点。→ 失败原因： 用户可能聚焦目录但未滚动内容，两个状态会冲突。→ 修正方法： 分别设计当前状态与
:focus-visible。 - 错误表现： 用数组索引生成目标 ID。→ 失败原因： 筛选和循环加载后会出现重复或漂移。→ 修正方法： 使用稳定业务标识，并在更新后检查唯一性。
- 错误表现： 直接依赖实验性属性上线。→ 失败原因： 支持矩阵和滚动容器行为不一致。→ 修正方法： 保留普通锚点，按能力增强并监控任务完成率。
追问及应对
追问一：为什么不用 IntersectionObserver？
Observer 适合在需要兼容现有浏览器或有复杂业务阈值时提供状态逻辑；scroll-target-group 可以减少这类状态代码。两者可分层使用，先保证链接和焦点，再比较维护成本。
追问二：横向轮播和纵向目录能共用一个组吗？
通常不应共用。它们的滚动轴、目标可见性和键盘模型不同，混在一个组里会让当前项含义不清。应按滚动容器拆组，并提供独立标签。
追问三：当前章节切换时要自动移动焦点吗？
不应因为被动滚动就强行移动焦点，这会打断键盘用户。只有用户主动激活目录链接时，才按组件约定把焦点留在链接或移动到目标标题，并让屏幕阅读器得到明确反馈。
追问四：如何处理减少动效偏好？
减少或取消平滑滚动和标记过渡，保留清晰的当前状态和焦点指示。功能导航不能依赖动画才能被理解。