性能级目录同步：IntersectionObserver 实战

前言：你一定深恶痛绝过去那种在 window.onscroll 里通过 getBoundingClientRect().top 暴力计算位置的做法。那简直是性能杀手，每一像素的滚动都在疯狂触发主线程计算，稍不注意就让页面掉帧。

在现代 Web 开发中，IntersectionObserver 是实现“滚动监听高亮”的标准答案。它把性能开销交给了浏览器底层，只有在元素“进场”或“出场”时才给你的 JS 发送通知。

---

1. 核心思路：定义“活跃区域”

与其监听哪个标题在视口里，不如定义一个**“检测横线”**。当标题穿过这条线时，我们就认为当前章节发生了切换。

• rootMargin：这是关键。如果你有 $80px$ 的固定头部，你需要设置 -80px 0px -70% 0px。

  • -80px（顶部）：避开固定头部。
  • -70%（底部）：确保只有靠近屏幕上半部分的标题会被触发，而不是屏幕底部刚露头的标题。

---

2. 代码实现：高内聚的 Hook 逻辑

假设你正在为 AI Prompt Manager 的长文档编写 TOC（Table of Contents）。

JavaScript

// 核心逻辑：监听所有 section
const observerOptions = {
  // 重点：调整检测区域。顶部留出 header 高度，底部留出大部分空间
  rootMargin: '-80px 0px -70% 0px',
  threshold: 0
};

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    // 只有当元素进入定义的“活跃区域”时触发
    if (entry.isIntersecting) {
      const id = entry.target.getAttribute('id');
      updateNavHighlight(id);
    }
  });
}, observerOptions);

// 绑定所有标题
document.querySelectorAll('section[id]').forEach((section) => {
  observer.observe(section);
});

function updateNavHighlight(id) {
  // 1. 移除所有旧高亮
  document.querySelectorAll('.toc-link').forEach(link => {
    link.classList.remove('active');
  });
  // 2. 激活当前 ID 对应的导航项
  const activeLink = document.querySelector(`.toc-link[href="#${id}"]`);
  if (activeLink) activeLink.classList.add('active');
}

---

3. 调优方案

① 解决“内容太短”导致的无法高亮

如果最后几个章节内容非常短，它们可能永远没机会触碰到视口顶部的检测区域。

• 策略：如果滚动到底部（window.innerHeight + window.scrollY >= document.body.offsetHeight），直接强制高亮最后一个导航项。

② 解决“快速滚动”时的视觉延迟

当用户飞速拖动滚动条时，可能会瞬间跨越多个章节。

• 优化：IntersectionObserver 默认就是异步的，不会阻塞滚动。但为了视觉更平滑，可以在 updateNavHighlight 中加入 requestAnimationFrame，或者通过 CSS 的 transition 为背景色/文字加个 $0.2s$ 的过渡。

③ 点击导航与滚动监听的“互斥处理”

当你点击导航栏跳转时，页面会平滑滚动。这期间会触发多个标题的 IntersectionObserver。

• 尴尬场景：点击了第 5 章，滚动过程中导航栏高亮会从 1、2、3、4 依次跳动。
• 对策：在点击导航跳转时，设置一个全局变量 isManualScrolling = true，跳转结束后（或者延迟一段时间）再将其设为 false。在高亮逻辑里判断，如果是手动跳转中，则不更新高亮。

---

4. 方案对比：为什么不用传统方案？

维度	window.onscroll + 计算	IntersectionObserver (推荐)
性能消耗	极高 (每帧都在计算 DOM 位置)	极低 (事件驱动，浏览器底层优化)
代码复杂度	中等 (需处理各种偏移量)	简洁 (声明式配置)
主线程占用	频繁占用，易引起卡顿	几乎不占用
精确度	受限（受 CSS 布局影响大）	极高 (直接监听交集状态)

---

5. 进阶：自动滚动目录栏

如果你的目录（TOC）本身也非常长，有滚动条，那么在高亮对应项时，还需要确保目录里的高亮项始终在目录的视口内。

JavaScript

function updateNavHighlight(id) {
  const activeLink = document.querySelector(`.toc-link[href="#${id}"]`);
  if (activeLink) {
    activeLink.classList.add('active');
    // 自动滚动目录容器，让高亮项居中显示
    activeLink.scrollIntoView({
      behavior: 'smooth',
      block: 'nearest' // 避免大幅度跳动
    });
  }
}

---