IntersectionObserver 可实现滚动自动高亮侧边目录，需监听标题元素、设 threshold=[0,0.1]、回调中仅记录目标ID并在空闲时更新高亮；目录与正文ID须严格一致且可预测，跳转后用 scroll-margin-top 适配 sticky header。
如何用 IntersectionObserver 实现滚动自动高亮侧边目录
靠 CSS 本身做不到“跟随翻阅自动追踪高亮”，必须配合 JS 监听元素进入视口。IntersectionObserver 是目前最轻量、兼容性足够（Chrome 51+/Firefox 55+/Safari 12.1+）、且不阻塞主线程的方案。
常见错误是直接监听所有标题节点并反复调用 getBoundingClientRect()，导致滚动卡顿；或用 scroll 事件加防抖，但精度差、响应滞后、在快速滚动时容易跳过目标。
- 只观察文档中实际用于导航的标题元素（如
<h2></h2>、<h3></h3>），避免观察整个文档或无关节点 - 设置
threshold: [0, 0.1]，让元素顶部刚进入视口（哪怕只露 10%）就触发判断，比默认[0]更灵敏 - 观察器回调里不要做 DOM 写操作（如改 class），只记录“哪个标题当前最接近顶部”，把高亮逻辑抽到
requestIdleCallback或节流后的更新函数里
侧边目录 HTML 结构怎么写才方便 JS 关联锚点
核心是让目录项和正文标题之间有可预测、可复用的 ID 映射关系。不能靠序号、文本内容或临时生成的 class 匹配——这些都不可靠，尤其当文档含动态内容或 SSR/SSG 渲染时。
典型错误：目录项 <a href="#section-1">第一章</a> 对应正文 <h2 id="ch1">第一章</h2>，ID 不一致导致点击跳转失败、滚动高亮失灵。
立即学习“前端免费学习笔记（深入）”；
- 正文标题必须带
id，且 ID 值要能被目录项href直接引用（推荐用slugify处理中文/空格/符号，例如"安装步骤"→"an-zhuang-bu-zhou"） - 侧边目录使用
<nav aria-label="文档目录"></nav>包裹，每个条目用<a href="#xxx"></a>，不要用<button></button>或data-id模拟跳转 - 如果服务端渲染，确保目录和正文的 ID 生成逻辑完全一致；客户端渲染时，建议在
useEffect（React）或connectedCallback（Web Component）中统一生成并同步
点击目录跳转后，如何让正文滚动平滑且定位精准
默认 href="#xxx" 跳转会“硬切”到锚点顶部，常被 sticky header 遮挡，或因 margin/padding 导致标题实际可视区域偏移。
常见错误是给 <h2></h2> 加 scroll-margin-top 却忘了兼容性——Firefox 早支持，但 Safari 直到 15.4 才支持，旧版需 fallback。
- 优先用 CSS：给所有标题加
scroll-margin-top: 80px（值等于 header 高度），现代浏览器自动生效 - Safari element.scrollIntoView({ block: 'start', behavior: 'smooth' })，并在调用前加
setTimeout微任务延迟，避开渲染队列竞争 - 避免在跳转后立即读取
offsetTop——若页面未完成 layout（比如图片还没加载完），值会不准；可用getBoundingClientRect().top + window.scrollY替代
为什么目录高亮总滞后半拍或错位
本质是滚动位置、元素尺寸、observer 触发时机三者没对齐。不是代码写错了，而是没处理好“谁先变、谁后读”的时序问题。
典型现象：快速向下滚动时，上一个标题还没取消高亮，下一个已加亮；或滚动停止后高亮才跳变一次。
-
IntersectionObserver的回调是异步的，但多个 entry 可能批量到达，需遍历所有 entry 并按intersectionRatio排序，取 ratio 最大者（即“最深”进入视口的那个）作为当前活跃项 - 不要仅依赖
isIntersecting === true就设为活跃——它只表示“有交集”，不代表“正在显示”，得结合boundingClientRect.top和rootBounds.top判断是否真正可见 - 如果文档用了
transform: translateY()或contain: layout等影响布局的 CSS，observer 可能误判，此时应回退到基于scroll+throttle+document.elementFromPoint()的兜底方案
最麻烦的其实是动态插入内容（比如展开折叠区块、加载更多章节）——新标题不会被已有 observer 监听，必须在插入后显式调用 observer.observe(newHeading)。这点很容易漏，一漏整个后续章节高亮就全失效。
