scrollIntoView仅触发滚动不更新激活状态，需用IntersectionObserver（单例+多阈值）结合scrollend或setTimeout监听滚动结束，并校验intersectionRatio>0.3；CSS权重和DOM就绪时机易致active失效。
scrollIntoView 会触发滚动但不更新激活状态
滚动到目标元素后，scrollIntoView 自己不关心导航项是否高亮——它只管滚动，不管样式。激活逻辑必须额外写，且得等滚动真正结束再执行，否则容易取到旧的 scrollTop 或错判可视区域。
- 用
scrollIntoView({ behavior: 'smooth' })后，别立刻查位置；加setTimeout(..., 100)或监听scroll事件节流判断 - 更稳的做法是监听
scrollend（Chrome 110+、Safari 16.4+ 支持），fallback 到setTimeout+requestIdleCallback - 别依赖
getBoundingClientRect().top判断“是否在视口”，要结合window.innerHeight和document.documentElement.scrollTop算绝对位置
IntersectionObserver 比 scroll 事件更准也更省资源
靠监听 scroll 手动遍历所有锚点来判断激活项，容易卡顿、漏判、重复触发。尤其是页面长、锚点多时，scroll 频率高，计算量大，还可能因防抖错过临界状态。
- 每个锚点元素配一个
IntersectionObserver实例太重；推荐单例观察所有锚点，用threshold: [0.1, 0.5, 0.9]提升中间态识别精度 -
rootMargin: '0px 0px -50% 0px'让“一半进入视口”就触发，比默认0px更符合“当前显示内容”的直觉 - 注意：
isIntersecting为true不代表“完全可见”，需配合intersectionRatio > 0.3过滤擦边情况
active 类名同步失败常因 CSS 选择器权重或 JS 执行时机
明明 JS 已给导航项加了 active，但样式没变——大概率是 CSS 里用了 .nav-item.active，却被更高权重的 .nav a:hover 或内联 style 覆盖；或者 JS 在 DOM 尚未就绪时就运行。
- 检查浏览器开发者工具里该元素的 computed styles，看
color/background是否被 override，优先降低 hover 规则权重，比如改用:is(.nav-item).active - 确保脚本在
DOMContentLoaded后执行，或把<script></script>放在
