如何利用 IntersectionObserver 实现单页应用中“阅读进度条”与目录的高性能联动

用 IntersectionObserver 实现阅读进度条与目录联动的关键是监听标题节点而非全局滚动，通过设置 threshold: [0, 0.1] 提前捕获进入视口的标题，利用唯一 ID 关联正文与目录，分离检测与 DOM 更新以避免阻塞，并用统一状态驱动进度条和高亮。

用 IntersectionObserver 实现阅读进度条与目录联动，关键不在“监听滚动”，而在于让浏览器主动告诉你“哪些章节正经过视口”。它天然规避 scroll 事件的高频触发和计算开销，是目前最轻量、精准、不卡顿的方案。

只观察标题节点，不观察整个页面

不要给 document 或 body 加 observer，而是聚焦在真正用于导航的标题上（如 h2、h3）。每个标题需带唯一且稳定的 id，比如 <h2 id="an-zhuang-bu-zhou">安装步骤</h2>。ID 必须由正文和目录共用——目录项的 href="#an-zhuang-bu-zhou" 和正文标题的 id 必须完全一致，否则点击跳转或高亮都会失效。

设置合理阈值，提升响应灵敏度

默认 threshold: [0] 要求元素完全进入视口才触发，体验迟钝。推荐设为 threshold: [0, 0.1]：只要标题顶部露出 10%，就视为“已进入”，能更早捕捉用户滚动意图。对目录高亮来说，这比等标题居中再变化更自然；对进度条来说，也更容易映射到连续百分比。

分离“检测”与“更新”，避免主线程阻塞

observer 回调里只做一件事：记录当前最靠近视口顶部的标题 ID 和它的交叉比例（intersectionRatio）。所有 DOM 操作——比如给目录项加 active 类、更新进度条宽度、滚动目录容器使其可见——都应移出回调，放进 requestIdleCallback 或节流后的更新函数里。这样即使快速滚动，界面也不会掉帧。

进度条与目录同步靠同一套状态驱动

不要分别写两套逻辑去算进度条和目录高亮。用一个统一的状态对象，例如：

• currentId：当前最接近顶部的标题 ID
• progress：基于该标题 intersectionRatio 和前后标题位置插值得到的 0–100 数值
• isActive：布尔值，表示该标题是否“主导”当前视口（可用来过滤过渡态）

进度条宽度直接绑定 progress；目录高亮依据 currentId 匹配；目录自动滚动则根据 currentId 查找对应 DOM 节点，在目录容器内调用 scrollIntoView({ block: 'center', behavior: 'smooth' }) 即可。