scroll-padding-top 必须写在 html 元素上，值为移动端导航栏视觉总高度（含 padding、border、阴影等），不可写在 body 或目标元素上；position: sticky 导航栏会导致其失效，推荐改用 fixed；与 scroll-margin-top 同时使用会叠加偏移。
直接写 html { scroll-padding-top: 48px; }，值必须等于移动端导航栏的视觉总高度（含 padding、border、阴影），不能写在 body 或目标元素上——否则 Safari 和旧 Edge 会忽略它。
scroll-padding-top 必须加在 html 上，不是 body 或 #section
浏览器的根滚动容器是 html 元素，scroll-padding-top 只对它生效。写在 body 上在 Safari 和旧 Edge 中常被忽略；写在 #about 上则完全无效果。
- ✅ 正确：
html { scroll-padding-top: 48px; } - ❌ 错误：
body { scroll-padding-top: 48px; } - ❌ 错误：
#contact { scroll-padding-top: 48px; }
例外：如果你手动创建了局部滚动容器（如 aside { overflow-y: auto; }），那 scroll-padding-top 就得写在那个 aside 上，且锚点跳转必须限定在该容器内（不能用全局 href="#id"）。
值必须是移动端导航栏的「视觉遮挡总高度」，不是 CSS height
固定导航栏占据的垂直空间 ≠ 你写的 height。它还包括 padding-top、border-top、box-shadow 的视觉延伸，甚至 transform: translateY(-100%) 这类隐藏逻辑也会让 DOM 高度失真。
- 打开 DevTools → 选中导航栏 → 查看 Computed 面板里的
height+ 所有向上方向占用（padding-top、border-top-width、阴影扩散等） - 别写死
80px：移动端导航栏折叠后变矮？改用媒体查询：@media (max-width: 768px) { html { scroll-padding-top: 48px; } } - 推荐抽成变量：
:root { --nav-height: 48px; }，再写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 同时存在会叠加偏移
两者作用机制不同，但最终都影响滚动终点位置。如果同时设置，浏览器会把两个值相加，导致过度上移。
- 例如：
html { scroll-padding-top: 48px; }+#faq { scroll-margin-top: 48px; }→ 实际偏移 96px - 检查是否意外继承了全局
scroll-margin-top规则（比如通过通配符或组件库样式） - 若需微调个别区块，优先删掉全局
scroll-padding-top，只在目标元素上用scroll-margin-top
最容易被忽略的是：移动端导航栏高度经常随折叠/展开、安全区（env(safe-area-inset-top)）、横竖屏切换而变化，纯 CSS 很难覆盖所有情况；真正复杂的场景，仍需 JS 动态读取 getBoundingClientRect() 并调用 element.scrollIntoView({ block: 'start', offsetTop: N }) 补位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
