纯静态题号导航可用HTML+CSS实现锚点跳转：用1配合题干id="q1"，并设置scroll-behavior: smooth；但无法自动高亮或记录状态，仅适用于只读场景。
怎么用 HTML + CSS 实现题号导航栏（不依赖 JS）
纯静态题号导航是可行的，但必须接受一个前提：它只能做「视觉锚点跳转」，不能自动高亮当前题、不能记录作答状态、也不能联动滚动区域。适合只读试卷或简单自测场景。
核心是 <a></a> 的 href="#q1" 和对应题干的 id="q1" 配合 scroll-behavior: smooth。
- 每个题号用
<a href="#q1">1</a>，不要用<button></button>或<div onclick> —— 否则无法被浏览器原生识别为可跳转锚点 <li>题干容器必须设 <code>id="q1"（不能用class或data-id），且 id 值需符合 HTML ID 规范（不能以数字开头，推荐q1、q2） - 在
或滚动容器上加style="scroll-behavior: smooth;"，否则跳转生硬；注意 Safari 旧版本不支持该属性 - 如果答题卡区域固定定位（
position: fixed），要给题干顶部预留足够 padding/margin，避免被导航栏遮挡 - 不要用
window.onscroll+getBoundingClientRect()手动计算，性能差、边界 case 多（比如题高度不一、有折叠题干） - 为每道题创建一个
IntersectionObserver实例，监听其是否进入视口；触发时更新data-active="true"到对应题号元素 - 题号栏本身也要监听点击：点击
<a data-qid="q3"></a>后，调用document.querySelector('#q3').scrollIntoView({ behavior: 'smooth' }) - 注意兼容性：
IntersectionObserver在 iOS 12.2+ 和 Android Chrome 51+ 支持良好；如需支持更老版本，可用 polyfill 或降级为 scroll + throttle - 每道题的输入控件（
<input type="radio">、<textarea></textarea>、<select></select>）必须有唯一name（如name="q3"），这样提交时才能结构化取值 - 用
change事件监听作答动作，而非click：radio/checkbox 点击可能不触发 change（比如重复点同一项），而 change 只在值真正变化时触发 - 标记功能建议用独立按钮（
<button type="button" data-action="mark" data-qid="q5">⚠️</button>），配合一个marked: Set<string></string>存 ID，避免污染表单数据 - 渲染题号状态时，优先读取 DOM 中控件的实际值（
el.checked、el.value），而不是维护另一套 JS 状态变量——容易不同步 - 横向滚动容器必须设
white-space: nowrap+overflow-x: auto，子项用display: inline-block或display: inline-flex，别用 flex 布局（flex 会换行） - 题号按钮最小宽度设
min-width: 2.5em，内边距用padding: 0.4em 0.6em，确保手指能准确点击（iOS 最小推荐热区 44×44px） - iOS Safari 横向滚动默认禁用惯性，加
-webkit-overflow-scrolling: touch可恢复；但该属性已废弃，现代方案是用touch-action: pan-x配合 passive event listener - 别在题号栏里放 SVG 或图标字体：部分安卓 WebView 渲染 SVG 会模糊，图标字体加载延迟会导致布局抖动
用 JavaScript 实现「当前题高亮 + 滚动同步」
只要用户滚动或点击题号，就实时更新高亮状态，并让题号栏“跟随”当前可视题——这才是真实答题卡需要的行为。关键不是监听 scroll，而是用 IntersectionObserver。
如何让题号导航支持「未答/已答/标记」三种状态
状态管理必须和表单控件绑定，不能只靠 class 切换。否则刷新页面后状态丢失，也无法导出答案数据。
立即学习“前端免费学习笔记（深入）”；
移动端适配题号栏常见的断裂点
题号横向滚动在手机上极易出问题：文字重叠、点击热区过小、滚动卡顿、iOS Safari 滚动条消失后无法拖拽。
题号导航看着简单，但滚动同步逻辑、状态持久化、移动端手势响应这三块最容易在联调时暴露问题，建议早期就用真机测试滚动行为和点击反馈。
