scroll-padding-top 是滚动行为控制属性，须作用于滚动容器（如 html），不改变盒模型；值应匹配导航栏真实视觉高度，避免与 scroll-margin-top 叠加；需确保滚动上下文有效。
scroll-padding 不是盒模型属性，别和 padding 混用
它不改变元素尺寸、不触发重排，只影响滚动终点的视觉对齐位置。很多人写 padding-top: 64px 想顶开锚点，结果内容区域被撑高、布局错乱——这是根本方向错误。scroll-padding-top 是纯滚动行为控制，和盒模型无关。
必须作用于滚动容器，通常是 html 元素
浏览器真正的根滚动容器是 html，不是 body。写在 body 上在 Safari 和旧 Edge 中基本无效；写在目标元素（比如 #section1）上则完全不生效。
- ✅ 正确：
html { scroll-padding-top: 64px; } - ❌ 错误：
body { scroll-padding-top: 64px; } - ❌ 错误：
#section1 { scroll-padding-top: 64px; }
例外：如果你用了自定义滚动容器（如 .sidebar { overflow-y: auto; }），那就得把 scroll-padding-top 写在那个 .sidebar 上，且锚点跳转必须限定在该容器内（不能用全局 href="#id"）。
值要匹配导航栏真实视觉高度，不是 CSS height
固定头部遮挡的不只是 height，还包括 padding-top、border-top-width、box-shadow 的视觉延伸，甚至 transform 偏移也可能影响实际占位。
立即学习“前端免费学习笔记（深入）”；
- 打开 DevTools → 选中导航栏 → 查看 Computed 面板里的「Height」+ 所有向上方向占用值之和
- 移动端折叠后变矮？用媒体查询：
@media (max-width: 768px) { html { scroll-padding-top: 48px; } } - 推荐抽成变量：
:root { --nav-height: 64px; }，再写html { scroll-padding-top: var(--nav-height); }
和 scroll-margin-top 同时存在会叠加偏移
scroll-padding-top（作用于滚动容器）和 scroll-margin-top（作用于目标元素）机制不同，但最终都会参与滚动终点计算。两者共存时，浏览器会直接相加，导致目标元素被顶得过高。
- 典型错误：既写了
html { scroll-padding-top: 64px; }，又给#faq加了scroll-margin-top: 64px→ 实际偏移 128px - 优先选
scroll-padding-top：它更稳定、语义清晰，适用于全局固定头部场景 - 仅当需要为个别元素定制偏移时，才单独用
scroll-margin-top，且确保滚动容器没设同向scroll-padding
真正容易被忽略的是滚动上下文是否成立：容器没设 overflow、内容未溢出、用了 overscroll-behavior: none，或者目标在 iframe 里——这些都会让 scroll-padding 完全失效，连报错都没有。
