要让滚动时对应目录项自动高亮，需用 IntersectionObserver 监听标题进入视口（阈值设为 [0.1]，rootMargin: "-50px 0px 0px 0px"），确保 DOM 就绪后初始化，并配合 scroll-margin-top 修正固定头部遮挡；点击跳转需 preventDefault + scrollIntoView + history.pushState。
锚点目录能跳转，但滚动后对应标题不自动高亮？问题出在监听逻辑和 DOM 匹配方式上，不是加个 id 就完事。
怎么让滚动时对应目录项自动高亮
核心是监听 window.onscroll 或 IntersectionObserver，判断哪个标题区块进入视口顶部附近。用 IntersectionObserver 更轻量、性能更好，且天然支持阈值控制。
- 不要用
getBoundingClientRect().top <= 0粗暴判断——滚动惯性或快速滑动时容易误判 - 给每个标题（如
<h2 id="section1">）绑定唯一id，目录项的href必须为#section1格式，否则点击跳转会失败 - 观察器阈值设为
[0.1]（即 10% 进入视口就触发），比0更稳定；同时需设置rootMargin: "-50px 0px 0px 0px"模拟“顶部偏移”，避免高亮滞后
目录项点击后如何平滑滚动并修正 URL
默认锚点跳转会触发页面重载式滚动，且不更新浏览器历史。要用 scrollIntoView + history.pushState 组合控制。
- 阻止
<a href="#section1">的默认行为：event.preventDefault() - 调用目标元素的
.scrollIntoView({ behavior: "smooth", block: "start" })，注意 IE 不支持该参数，需降级为behavior: "auto" - 手动更新地址栏：
history.pushState(null, "", event.target.getAttribute("href"))，否则前进/后退无效 - 如果页面有固定头部，
scrollIntoView会把标题顶到窗口最上方，遮挡在导航栏下——得用scroll-margin-topCSS 属性补偏移，例如h2 { scroll-margin-top: 64px; }
为什么 IntersectionObserver 回调里 getEntries() 有时为空
常见于动态渲染内容（如 Vue/React 组件挂载后才插入标题），或观察器初始化早于 DOM 就绪。
立即学习“前端免费学习笔记（深入）”；
- 确保在所有标题元素已存在于 DOM 后再创建
IntersectionObserver实例，比如放在DOMContentLoaded或框架的mounted/useEffect中 - 检查是否对同一个元素重复调用
observer.observe(el)，会导致异常静默；可用observer.takeRecords()或console.log(observer.takeRecords())调试当前观察状态 - 若标题用了
display: none或visibility: hidden，它不会被IntersectionObserver检测到——改用opacity: 0+pointer-events: none替代
滚动高亮的本质是“位置映射”而非“样式开关”，错位往往来自滚动偏移计算没对齐、观察时机不对，或者 CSS 层叠干扰了 scroll-margin 生效。多用 getBoundingClientRect() 打印实时坐标，比猜更可靠。
