html元素是浏览器根滚动容器，scroll-padding-top必须设在html上才稳定生效；遮挡高度需累加导航栏的height、padding-top、border-top-width及box-shadow垂直偏移量。
直接在 html 元素上设置 scroll-padding-top，值等于 fixed 导航栏的视觉总高度（含 padding、border、box-shadow），是唯一稳定、零 JS、不破坏布局的解法。
为什么必须写在 html 上，而不是 body
浏览器的根滚动容器是 html 元素，不是 body。写在 body 上在 Safari 和旧版 Edge 中完全无效；Chrome 虽偶有响应，但属非标准行为，不可依赖。
常见错误现象：
-
body { scroll-padding-top: 64px; }→ 页面刷新后锚点依然被盖住 -
#about { scroll-padding-top: 64px; }→ 样式生效但毫无作用
正确写法只有一行：html { scroll-padding-top: 64px; }
立即学习“前端免费学习笔记（深入）”；
怎么算出准确的“遮挡高度”
不能只看导航栏的 height 值。它实际占据的垂直空间 = height + padding-top + border-top-width + box-shadow 的垂直扩散量（如有）。
实操建议：
- 打开 DevTools → 选中导航栏 → 切到 Computed 面板
- 逐项加总：「Height」+「Padding Top」+「Border Top Width」+ 「Shadow Vertical Offset」
- 单位用
px或rem，避免用%（它按视口宽度计算，和高度无关） - 移动端折叠后变矮？别写死值，改用 CSS 变量 + 媒体查询
例如：
:root { --nav-height: 64px; }
@media (max-width: 768px) {
:root { --nav-height: 48px; }
}
html { scroll-padding-top: var(--nav-height); }
遇到 position: sticky 导航栏怎么办
scroll-padding-top 在 sticky 场景下会失效——因为 sticky 是动态吸附，其占位高度随滚动状态变化，而 scroll-padding-top 是静态偏移，无法响应。
两个可行路径：
- 把导航栏改成
position: fixed（语义清晰、行为可预测） - 放弃全局方案，改用
scroll-margin-top逐个微调目标元素：h2[id] { scroll-margin-top: calc(var(--nav-height) + 8px); }
注意：scroll-margin-top 必须写在目标元素自身上（如 #faq、h2[id]），写在 body 或 :target 上基本无效。
最容易被忽略的两个硬性前提
即使代码全对，线上仍可能失败，八成问题出在这两点：
-
html或body上误加了overflow: hidden或overflow: clip→ 直接禁用scroll-padding行为 - 导航栏用了
transform: translateY(-100%)等隐藏逻辑 → DOM 高度失真，Computed 面板里看到的“真实视觉高度”≠ 实际遮挡范围
调试时第一反应不该是加 JS，而是先检查这两个地方。它们比任何兼容性补丁都更常导致“设了没用”。
