scroll-padding-top 必须写在 html 元素上，因其仅对根滚动容器生效；写在 body 或目标元素上无效，safari 和旧 edge 会忽略 body 上的设置，目标元素上则完全无作用。
scroll-padding-top 必须写在 html 元素上，值等于导航栏视觉总高度（含 padding、border、box-shadow），否则锚点跳转后内容仍会被遮住。
为什么 scroll-padding-top 写在 body 或目标元素上无效
浏览器的根滚动容器是 html 元素，scroll-padding-top 只对它生效。写在 body 上在 Safari 和旧 Edge 中常被忽略；写在 #about 这类目标元素上则完全无效果。
- ✅ 正确：
html { scroll-padding-top: 64px; } - ❌ 错误：
body { scroll-padding-top: 64px; } - ❌ 错误：
#about { scroll-padding-top: 64px; }
例外情况：如果你手动创建了局部滚动容器（如 aside { overflow-y: auto; }），那 scroll-padding-top 就得写在那个 aside 上，且锚点跳转必须限定在该容器内（不能用全局 href="#id"）。
怎么算出准确的导航栏“视觉总高度”
固定导航栏占据的垂直空间 ≠ CSS 中写的 height。它还包括 padding-top、border-top-width、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: 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-padding-top 和 scroll-margin-top 同时存在会叠加偏移
两者作用机制不同，但最终都影响滚动终点位置。如果同时设置，浏览器会把两个值相加，导致偏移过大、目标元素下移过多。
- 优先选
scroll-padding-top（作用于全局滚动，声明式，兼容性好） - 只在
scroll-padding-top不可用时（如sticky导航 + 无法改fixed），才单独用scroll-margin-top作用于目标元素：#features { scroll-margin-top: 64px; } - 注意：若目标元素本身有
margin-top或padding-top，叠加后可能进一步错位，需在 DevTools 中反复校验
真正容易被忽略的是：导航栏的 box-shadow 和 transform 带来的视觉延伸，它们不会出现在 offsetHeight 里，但会影响人眼判断的“遮挡起点”。调试时务必用截图比对真实像素位置，而不是只信代码里写的数字。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
