scroll-padding-top 必须写在 html 元素上才生效，用于修正锚点滚动时被 fixed 导航栏遮挡的问题；对 sticky 导航无效，此时应改用 scroll-margin-top 或改为 fixed 定位。
scroll-padding-top 只对根滚动容器（html）生效，写在 body 或目标元素上基本无效；它适合全站导航高度固定且为 position: fixed 的场景，但遇到 position: sticky 会失效。
scroll-padding-top 必须加在 html 上才起作用
浏览器的锚点滚动行为由根滚动容器控制，而这个容器是 html 元素，不是 body。写在 body 上在 Safari 和旧版 Edge 中常被忽略；写在 #about 或 nav 上则完全无效果。
- ✅ 正确：
html { scroll-padding-top: 64px; } - ❌ 错误：
body { scroll-padding-top: 64px; } - ❌ 错误：
section#about { scroll-padding-top: 64px; }
例外情况：如果你手动创建了局部滚动容器（如 aside { overflow-y: auto; }），那 scroll-padding-top 就得写在那个 aside 上，且锚点跳转必须限定在该容器内（不能用全局 href="#id"）。
值要等于导航栏的「视觉总高度」，不是 CSS height
只看 height: 64px 是不够的——padding-top、border-top-width、box-shadow 向上扩散部分都会增加实际遮挡区域。用 DevTools 的 Computed 面板查最准。
- 常见漏项：
padding: 16px 0→ 实际向上多占 16px - 移动端折叠后变矮（如从 64px → 48px），硬写死会导致多留白
- 推荐用 CSS 变量统一管理：
:root { --nav-height: 64px; }，再写html { scroll-padding-top: var(--nav-height); } - 响应式可配合
@media或clamp(48px, 5vw, 64px)
遇到 position: sticky 导航栏时，scroll-padding-top 基本失效
position: sticky 在滚动中动态吸附，但它的文档流高度会随状态切换（未吸顶时占位高，吸顶后 DOM 高度未重算），而 scroll-padding-top 是静态偏移，浏览器只按初始渲染计算一次，不会监听 sticky 状态变化。
- 结果：页面刚加载时准，一滚动 sticky 激活，目标立刻被盖住
- Safari 和旧版 Chrome 对该组合支持极不稳定，部分版本直接忽略
- 别试图用 JS 动态改
html.style.scrollPaddingTop—— 它不支持运行时重计算，改了也无效 - 更稳解法：把导航栏改成
position: fixed；次选方案是换用scroll-margin-top
和 scroll-margin-top 同时使用会叠加偏移
两者机制不同，但最终都影响滚动终点位置。如果你在 html 上写了 scroll-padding-top: 64px，又给 #faq 加了 scroll-margin-top: 64px，浏览器会把两个值相加，导致目标停在比预期高 128px 的位置。
- 全站导航高度一致 → 优先用
html { scroll-padding-top: ... } - 只有少数几个区块需要避让，或导航高度不统一（如首页有 banner）→ 改用
scroll-margin-top加在目标元素上 - 目标元素必须有
id或name属性，否则根本不触发锚点跳转 - 父容器设了
overflow: hidden或transform时，scroll-margin-top可能被忽略
真正容易被忽略的是：导航栏是否用了 transform 或 clip-path 类隐藏逻辑，导致 DOM 高度 ≠ 视觉占用高度；这种情况下，连 DevTools 的 Computed 高度都可能不准，得靠肉眼校准。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
