单页滚动真正适配语义化导航的是scrollintoview()，它基于dom节点自动计算位置、避开sticky头部、支持平滑滚动；scrollto()仅适合精确像素定位，易被fixed导航栏遮挡内容。
单页滚动依赖 window.scrollTo() 还是 scrollIntoView()？
多数人一上来就查 scrollTo()，但它只适合精确像素定位，对锚点跳转不友好；真正适配语义化单页导航的是 scrollIntoView()，它能自动计算目标元素位置、处理 sticky 头部遮挡、支持平滑滚动。
关键区别：
-
scrollTo({ top: 500, behavior: 'smooth' })：硬编码偏移，滚动后可能被 fixed 导航栏盖住内容 -
element.scrollIntoView({ block: 'start', behavior: 'smooth' })：基于 DOM 节点，自动避开 sticky 区域，语义清晰 - 移动端 Safari 对
behavior: 'smooth'支持不稳定，需 fallback 到scrollIntoViewOptions的 polyfill 或 CSSscroll-behavior: smooth
如何让导航菜单点击后精准锚定且不跳 URL？
常见错误是直接写 @#@#@#@#@#@#@#@#@#@0 —— 这会触发 URL hash 变更和原生跳转，干扰 SPA 路由或导致页面重绘。
正确做法是拦截默认行为 + 显式滚动：
- 给每个导航项绑定
click事件，用e.preventDefault()阻止默认跳转 - 用
document.querySelector(e.target.getAttribute('href'))找到目标元素 - 调用
target.scrollIntoView({ block: 'start', behavior: 'smooth' }) - 若需同步更新 URL（如支持前进/后退），手动调用
history.pushState()，而非依赖 hash
滚动监听时为什么 IntersectionObserver 比 scroll 事件更可靠？
用 addEventListener('scroll', ...) 做“当前在哪一节”判断，容易卡顿、漏判、触发频率失控；IntersectionObserver 是浏览器原生优化的异步观察机制，不阻塞主线程，且天然支持阈值控制。
典型配置要点：
- 设置
threshold: [0, 0.1, 0.5, 1.0]，可区分“刚进入视口”“一半可见”“完全可见”等状态 - 监听目标必须是 section 级块级元素，不能是
<div> 嵌套过深或高度为 0 的容器 <li>active 导航项高亮逻辑应放在 <code>observerCallback内，避免重复 DOM 查询 - 记得在组件卸载或页面切换时调用
observer.disconnect()，防止内存泄漏 - 目标 section 是否设置了
transform: translateZ(0)或will-change: transform，否则 iOS Safari 渲染层不启用 GPU 加速 - 是否误加了
overflow: hidden在 body 或父容器上，导致滚动被截断 - 是否用了
position: sticky导航栏但未设top: 0，造成滚动锚点计算偏移 - 安卓 WebView 中
scrollIntoView对 flex 容器子项兼容性差，建议改用绝对定位或显式计算offsetTop
移动端滚动卡顿、跳动、无法触发 scrollIntoView 怎么办？
根本原因常是 CSS 层叠或硬件加速缺失，不是 JS 写错了。
必须检查的几处：
最易被忽略的是：滚动区域外的动画或定时器持续运行，悄悄吃掉主线程资源——哪怕只是个轮播图的 setInterval，也会让滚动帧率掉到 30fps 以下。
