scroll-padding-top 必须写在 html 元素上，因为浏览器根滚动容器是 html；body 或目标元素上设置基本无效；正确写法为 html { scroll-padding-top: 64px; }。
scroll-padding-top 必须写在 html 上，不是 body 或目标元素
绝大多数失效案例，根源是写错了作用对象。浏览器的根滚动容器是 html 元素，body 的 scroll-padding-top 在 Chrome、Firefox、Safari 中基本被忽略；写在目标 h2 或 section 上则完全不生效——它不是给元素加内边距，而是告诉滚动引擎“把目标对齐到视口顶部时，多留出多少空间”。
正确写法只有一处：
html {
scroll-padding-top: 64px;
}如果导航栏高度是响应式的（比如移动端缩为 56px），推荐用 CSS 自定义属性联动：
:root {
--header-height: 64px;
}
@media (max-width: 768px) {
:root {
--header-height: 56px;
}
}
html {
scroll-padding-top: var(--header-height);
}动态高度必须用 JS 更新，纯 CSS 无法监听 height 变化
当导航栏高度由 JS 控制（如折叠/展开、登录态切换、无障碍缩放触发）时，CSS 媒体查询和自定义属性都无能为力。此时需手动同步 scrollPaddingTop：
立即学习“前端免费学习笔记（深入）”；
- 监听相关状态变更（如 class 切换、resize、或自定义事件）
- 读取当前导航栏
offsetHeight，注意要等样式计算完成（可用getComputedStyle验证） - 直接设置
document.documentElement.style.scrollPaddingTop
示例：
function updateScrollPadding() {
const header = document.querySelector('.fixed-header');
if (!header) return;
const height = header.offsetHeight;
document.documentElement.style.scrollPaddingTop = `${height}px`;
}
// 调用时机：DOM 加载后、header 尺寸变化后、resize 后
updateScrollPadding();Safari 15.4–16.3 的 calc + env 首次跳转失效是已知 bug
若你用了 scroll-padding-top: calc(64px + env(safe-area-inset-top))，在 Safari 15.4–16.3 中，首次锚点跳转（如点击 #faq）大概率不生效，后续操作才恢复。这不是配置错误，是 WebKit 渲染管线的竞态问题。
绕过方式只有两个：
- 降级为固定值（如
64px），放弃安全区适配（iOS 比例屏下可能轻微遮挡） - 强制触发一次重排：跳转后立即调用
window.dispatchEvent(new Event('resize'))，或延迟requestAnimationFrame再设一次值
Firefox 则不支持 scroll-padding-block 这类逻辑属性缩写，必须拆成 scroll-padding-top 和 scroll-padding-bottom 单独写。
scroll-margin-top 和 scroll-padding-top 别混用
两者都能影响锚点对齐位置，但作用层级不同：scroll-margin-top 是设在目标元素上，属于“个体策略”；scroll-padding-top 是设在滚动容器上，属于“全局策略”。同时使用会叠加偏移，导致跳转位置远超预期。
推荐统一用 scroll-padding-top，除非你只希望某几个特定区块避让（比如仅 FAQ 标题需额外多留 20px），这时才对那几个元素单独加 scroll-margin-top。
另外，scroll-margin-top 在旧版 Safari（scroll-padding-top 在现代浏览器中行为更一致，且可配合 @supports 安全降级：
@supports (scroll-padding-top: 1px) {
html { scroll-padding-top: 64px; }
}
@supports not (scroll-padding-top: 1px) {
/* 降级：用 padding-top + margin-top 技巧 */
.anchor-target::before {
display: block;
content: '';
margin-top: -64px;
height: 0;
visibility: hidden;
}
}真正麻烦的从来不是写哪一行 CSS，而是得判断当前页面有没有滚动容器、导航栏高度是否受 JS 干预、以及用户用的是不是那个刚好卡在 bug 版本里的 Safari —— 这些细节不验一遍，光抄代码没用。
