CSS导航指示器如何实现滚动自动激活对应菜单项样式？

本文共计835个文字，预计阅读时间需要4分钟。

当滚动到目标元素后，使用以下代码：

• 用 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 频率高，计算量大，还可能因防抖错过临界状态。