必须写在html上，因其仅对根滚动容器生效；body或目标元素上设置无效，Safari和旧Edge会忽略，且overflow:hidden会禁用该属性。
直接在 html 元素上设 scroll-padding-top，值用 clamp() 或媒体查询动态匹配导航栏视觉高度，就能让所有内锚点跳转在桌面/移动端都避开遮挡——这是目前最稳、最省事的解法。
为什么必须写在 html 上，而不是 body 或目标元素？
浏览器的根滚动容器是 html，不是 body。写在 body 上在 Safari 和旧版 Edge 中常被忽略；写在 #faq 或 section 上则完全无效——scroll-padding-top 是容器级偏移，只对滚动容器本身生效。
- ✅ 正确：
html { scroll-padding-top: 64px; } - ❌ 错误：
body { scroll-padding-top: 64px; } - ❌ 错误：
#about { scroll-padding-top: 64px; }
例外：如果你手动设置了某个 aside 或 main 为局部滚动容器（如 overflow-y: auto），那 scroll-padding-top 就得写在那个容器上，且锚点链接必须限定在该容器内（不能用全局 href="#id"）。
怎么设值才能适配桌面和移动端不同导航高度？
别写死 64px 或 48px —— 导航栏在移动端折叠后变矮，静态值会导致跳转留白或遮挡。
立即学习“前端免费学习笔记（深入）”；
- 推荐用
clamp(48px, 5vw, 64px)：下限是移动端最小高度，上限是桌面最大高度，中间用视口宽度比例过渡 - 或用媒体查询：
@media (max-width: 768px) { html { scroll-padding-top: 48px; } } - 数值必须等于导航栏「视觉总高度」：包括
height、padding-top、border-top-width、box-shadow向上扩散部分——用 DevTools 的 Computed 面板查最准
scroll-padding-top 在 position: sticky 导航下为啥失效？
因为 sticky 元素在滚动中动态吸附到顶部，但它的文档流高度会随状态切换（未吸顶时占位高，吸顶后视觉覆盖但 DOM 高度未重算），而 scroll-padding-top 是静态偏移，只按初始渲染计算一次，无法响应这种变化。
- 结果就是：页面刚加载时准，一滚动
sticky激活，锚点立刻被盖住 - 最稳解法：把导航栏改成
position: fixed（语义清晰、行为可预测） - 次选方案：放弃
scroll-padding-top，改用scroll-margin-top加在目标元素上（如h2[id] { scroll-margin-top: 64px; }）
哪些情况会让 scroll-padding-top 完全不生效？
两个最容易被忽略的问题，占线上故障八成以上：
-
html或body上意外加了overflow: hidden—— 这会直接禁用所有scroll-padding行为 - 导航栏高度算错了：只看了
height: 60px，漏掉padding: 16px 0，实际遮挡 76px；或用了transform: translateY(-100%)隐藏 banner，导致 DOM 高度 ≠ 视觉占用高度
真正难调的不是属性本身，而是确认“滚动容器是否干净”和“视觉高度是否真等于你写的那个数”。
