scroll-margin 必须加在带 id 的目标元素上，如 h2[id]、section[id]，值需等于导航栏实际视觉高度，SPA 中需手动调用 scrollIntoView()，Safari 15.4+ 才稳定支持，父容器 overflow: hidden 会使其失效。
scroll-margin 必须加在目标元素上，不是导航栏或 body
它只对带 id 的目标元素生效，比如 <h2 id="faq"> 或 <section id="contact">。写在 <nav>、<body> 甚至 <html> 上都无效——浏览器压根不认。
常见错误是把样式堆在全局选择器里：body { scroll-margin-top: 64px; }，结果一点用没有。正确写法是：
h2[id], h3[id], section[id] {
scroll-margin-top: 64px;
}
这样覆盖所有带 id 的标题和区块，不用每个都手动写。
值要严格等于固定导航栏的视觉总高度
不是只看 height，还要算上 padding-top、border-top，甚至 box-shadow 向上延伸的部分。DevTools 的 Computed 面板里查 offsetHeight 最准。
立即学习“前端免费学习笔记（深入）”；
- 只设
height: 60px，但漏了padding: 12px 0→ 实际遮挡 72px - 移动端导航折叠后变矮（如从 64px → 48px），但 CSS 还写死
64px→ 小屏偏移过大 - 用了
transform: translateY(-100%)隐藏 banner，DOM 高度 ≠ 视觉占用高度 → 偏移错位
推荐用 px 或 rem，别用 % —— 它按视口宽度算，跟高度无关，必然错。
SPA 中 href="#id" 点击后 scroll-margin 不生效？那是没触发滚动定位
Vue Router / React Router v6+ 默认拦截 href="#id"，不走原生锚点逻辑，scroll-margin 自然不触发。
必须手动调用 scrollIntoView()，且确保元素已挂载：
document.addEventListener('click', e => {
if (e.target.matches('[data-scroll-to]')) {
e.preventDefault();
const id = e.target.dataset.scrollTo;
const el = document.getElementById(id);
if (el) el.scrollIntoView({ block: 'start', behavior: 'smooth' });
}
});
注意三点：
- 不能等
hashchange再执行——首次访问example.com/#faq时该事件不触发 - 必须检查
el是否存在，React/Vue 异步组件可能还没渲染出来 - 若目标在
Shadow DOM或 iframe 里，得单独找节点并调用
Safari 和旧版浏览器的兼容性坑
scroll-margin-top 在 Safari 15.4+ 才稳定支持，15.3 及更早版本会静默忽略；iOS Safari 直到 15.4 才支持 behavior: 'smooth'。
降级方案要分层处理：
- 检测支持：
if ('scrollMarginTop' in document.documentElement.style) - 不支持时 fallback 到
window.scrollBy(0, -64)，但要防重复执行（比如 hash 变化 + 页面加载同时触发） - 避免用
margin-top: -64px+padding-top: 64px模拟——破坏语义、影响打印、干扰无障碍读取
真正容易被忽略的是：即使写了 scroll-margin-top，如果目标元素父容器有 overflow: hidden 或 display: none，滚动上下文就被截断，偏移照样失效。
