scroll-padding-top 必须写在 html 元素上才可靠生效，因浏览器根滚动容器是 html 而非 body；设在 body 上在 safari 等浏览器中多静默失效，且受 overflow: hidden/clip 影响而禁用。
scroll-padding-top 必须写在 html 元素上，否则基本无效——这是修复固定导航栏遮挡锚点内容最常踩的坑。
为什么 scroll-padding-top 只对 html 有效
浏览器的根滚动容器是 html 元素，不是 body。这个属性只作用于实际承载页面级滚动行为的容器。body 上设 scroll-padding-top 在 Safari 15.3 及更早版本完全不生效；Chrome 和 Firefox 行为也不一致，属于不可靠行为。
-
html { scroll-padding-top: 64px; }✅ 全局生效，覆盖点击链接、URL hash 变化、浏览器前进/后退所有路径 -
body { scroll-padding-top: 64px; }❌ 多数情况静默失效，尤其 iOS/Safari - 若
html或body被设了overflow: hidden或overflow: clip，该属性会直接被禁用
怎么算准那个“刚好不遮”的数值
值必须等于固定导航栏的**真实视觉总高度**，不是 CSS 中写的 height 单独值。它包含 padding-top、border-top-width、box-shadow 的垂直扩散，甚至 transform: translateY(-100%) 这类隐藏逻辑也会让 DOM 高度失真。
- 打开 DevTools → 选中导航栏 → 查看 Computed 面板里的
height+ 所有向上方向占用（padding-top、border-top-width、阴影垂直偏移） - 推荐抽成变量：
:root { --nav-height: 64px; }，再写html { scroll-padding-top: var(--nav-height); } - 移动端导航栏折叠后变矮？别写死
64px，改用媒体查询：@media (max-width: 768px) { html { scroll-padding-top: 48px; } }
和 scroll-margin-top 同时用会叠加偏移
scroll-padding-top 是全局控制，scroll-margin-top 是单个元素微调，两者机制不同但最终都影响滚动终点位置。如果同时设置，浏览器会把两个值相加，导致目标元素被过度上移。
- 全站只有一个固定顶部导航栏？优先用
html { scroll-padding-top: var(--nav-height); }，一行解决所有锚点 - 只有少数几个区块需要跳转（如
#faq、#contact），且它们的“避让高度”不一致？才考虑给每个目标元素单独加scroll-margin-top -
scroll-margin-top必须写在目标元素本身（比如h2[id]），写在body、main或:target上均无效或不稳定
position: sticky 导航栏会让 scroll-padding-top 失效
position: sticky 在滚动中动态“吸附”到顶部，但它的占位高度随滚动状态变化；而 scroll-padding-top 是静态偏移，无法响应这种切换。结果就是：页面刚加载时准，一滚动 sticky 激活后，锚点立刻被盖住。
- 最稳解法：把导航栏改成
position: fixed（语义清晰、行为可预测） - 次选方案：放弃
scroll-padding-top，改用scroll-margin-top+display: flow-root组合（前提是目标元素父容器已清除浮动） - 不要试图用 JS 动态改
scroll-padding-top——它不支持运行时重计算，改了也无效
真正容易被忽略的是：这个属性只修正滚动终点，不改变任何布局。如果你设置了还是遮挡，第一反应不该是加 JS，而是检查 html 是否被意外加了 overflow: hidden，或者导航栏高度算错了——这两个问题占了线上故障的八成以上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
