scroll-padding-top 必须写在 html 元素上才生效，因浏览器根滚动容器是 html；写在 body 或目标元素上无效；局部滚动容器需单独设置；值应等于导航栏实际视觉总高度，非仅 height；position: sticky 会导致其失效，推荐改用 fixed；不可与 scroll-margin-top 同时使用，否则偏移叠加。
scroll-padding-top 必须写在 html 上，否则无效
浏览器的根滚动容器是 html 元素，scroll-padding-top 只对它生效。写在 body 上在 Safari 15.3 及更早版本中完全忽略；写在目标元素（如 #about）上则毫无作用。
- ✅ 正确：
html { scroll-padding-top: 64px; } - ❌ 错误：
body { scroll-padding-top: 64px; } - ❌ 错误：
#contact { scroll-padding-top: 64px; }
如果页面里有局部滚动容器（比如 aside { overflow-y: auto; }），那才需要把 scroll-padding-top 写在那个 aside 上，且锚点跳转必须限定在该容器内（不能用全局 href="#id"）。
值必须等于导航栏「视觉总高度」，不是 CSS height
固定导航栏占据的垂直空间 ≠ 你写的 height。它还包括 padding-top、border-top-width、box-shadow 的向上扩散，甚至 transform: translateY(-100%) 这类隐藏逻辑也会让 DOM 高度失真。
- 打开 DevTools → 选中导航栏 → 查看 Computed 面板里的
height+ 所有向上方向占用（padding-top、border-top、阴影扩散等） - 移动端折叠后变矮？别写死
64px，改用媒体查询：@media (max-width: 768px) { html { scroll-padding-top: 48px; } } - 推荐抽成变量：
:root { --nav-height: 64px; }，再写html { scroll-padding-top: var(--nav-height); }
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——它不支持运行时重计算，改了也无效
和 scroll-margin-top 同时使用会叠加偏移
scroll-padding-top 和 scroll-margin-top 作用机制不同，但最终都影响滚动终点位置。如果同时设置，浏览器会把两个值相加，导致过度上移——比如导航高 64px，你又在 h2#about 上写了 scroll-margin-top: 64px，那实际偏移就是 128px。
- 二者选其一即可：
scroll-padding-top适合全站统一导航高度；scroll-margin-top更适合局部微调或导航高度不一致的页面 - 若用了第三方 SPA 路由器（如 React Router 的
useNavigate+scrollIntoView），需确认是否绕过了原生滚动逻辑——此时scroll-padding-top不会触发 - 检查
html或body是否写了overflow: hidden，这会直接禁用根滚动容器的 scroll padding 行为
