滚动导航高亮不准确的根源在于错误使用 offsetTop 或 scrollTop，正确做法是用 getBoundingClientRect().top 结合视口中心（window.innerHeight/2）判断，并用 requestAnimationFrame 节流；需避开 position: sticky 对 offsetTop 的干扰，iOS Safari 要补充 touchmove 监听，同时注意缩放和 iframe 导致的布局抖动。
滚动时导航项高亮不准确，getBoundingClientRect() 返回值没处理好
常见现象是页面滚动一点点，顶部导航就跳变高亮，或者根本不动。核心问题在于没用 getBoundingClientRect() 的 top 值做相对视口判断，而是直接拿 offsetTop 或 scrollTop 粗暴比较。
正确做法是：对每个目标区块（如 section）调用 .getBoundingClientRect()，检查其 top 是否在视口范围内（比如 top = -100），而不是看它离文档顶部多远。
- 视口中心判定更稳定：用
window.innerHeight / 2作阈值，比0更容错 - 负偏移允许提前触发：加
-100让导航在区块刚进入视口时就高亮 - 避免频繁重排：所有 DOM 查询（
document.querySelectorAll、.getBoundingClientRect()）应缓存或节流
节流写法选 requestAnimationFrame 而不是 setTimeout
用 setTimeout + 时间戳节流容易漏帧或延迟明显，尤其在快速滚动时导航高亮会“卡住”。requestAnimationFrame 保证每帧只执行一次，且与屏幕刷新同步。
实操建议直接封装成可复用的监听器：
立即学习“前端免费学习笔记（深入）”；
let ticking = false;
function updateActiveNav() {
if (!ticking) {
requestAnimationFrame(() => {
const scrollY = window.scrollY + 50; // 加50像素补偿
document.querySelectorAll('section').forEach(section => {
const rect = section.getBoundingClientRect();
if (rect.top <= window.innerHeight / 2 && rect.bottom >= window.innerHeight / 2) {
const id = section.id;
document.querySelector(`nav a[href="#${id}"]`).classList.add('active');
document.querySelectorAll('nav a').forEach(a => a !== document.querySelector(`nav a[href="#${id}"]`) && a.classList.remove('active'));
}
});
ticking = false;
});
ticking = true;
}
}
window.addEventListener('scroll', updateActiveNav);
position: sticky 导航栏和滚动监听冲突
如果导航栏用了 position: sticky，滚动监听中若依赖 offsetTop 或未重置计算基准，会导致高亮错位。因为 sticky 元素脱离普通文档流后，其 offsetTop 不再反映真实视觉位置。
解决方式只有两个：
- 监听逻辑完全避开
offsetTop，只用getBoundingClientRect()—— 它返回的是相对于当前视口的位置，不受sticky影响 - 确保目标
section没被transform、scale等 CSS 属性干扰，否则getBoundingClientRect()返回值会失真
移动端 Safari 上 scroll 事件触发异常
iOS Safari 默认启用滚动弹性（overscroll），导致 scroll 事件在手指松开后才密集触发，造成高亮滞后或跳变。这不是代码 bug，而是浏览器行为。
必须加一层兼容处理：
- 监听
touchmove事件作为补充，但注意只在 iOS 设备上启用（用navigator.userAgent.includes('WebKit') && navigator.userAgent.includes('Mobile')判断） - 避免同时绑定
scroll和touchmove导致重复执行，可用标志位控制 - 不要依赖
scrollend事件——目前 Safari 仍不支持，别写进去
实际项目里最常被忽略的是 getBoundingClientRect() 在缩放页面（比如双指 pinch）下的返回值变化，以及 section 内部有 iframe 或 canvas 时的布局抖动。这些不会报错，但会让高亮时机飘忽不定。
