scroll-padding 是解决锚点滚动后内容被固定头部遮挡的核心 css 属性，它作用于滚动容器（如 html），通过设置 scroll-padding-top: 64px 留出导航栏高度空间，避免目标元素被遮盖，且优先级高于 scroll-margin，需确保容器可滚动并在现代浏览器中正确启用。
scroll-padding 是解决锚点滚动后内容被固定头部遮挡的核心 CSS 属性，不是 JavaScript 补丁，也不是 hack，而是原生支持的滚动容器内边距控制机制。
为什么 scroll-padding 比 scroll-margin-top 更适合固定导航栏场景
当页面有 position: fixed 的顶部导航栏（比如高 64px），点击锚点链接跳转后，目标元素常被遮住——scroll-margin-top 是给「目标元素自身」加外边距，影响的是它在视口中的对齐位置；而 scroll-padding 是给「滚动容器」（通常是 html 或 body）设置内边距，相当于告诉浏览器：“别把内容贴着视口顶边停，留出 64px 空间”。
- 必须作用于滚动容器本身，常见写法：
html { scroll-padding-top: 64px; } - 若使用自定义滚动容器（如
div.scroll-container），需确保它有overflow: auto/scroll且是实际滚动主体 -
scroll-padding支持简写：scroll-padding: 64px 0 0 0，但多数场景只设顶部即可 - 不兼容 IE，但 Chrome 89+、Firefox 82+、Safari 15.4+ 均已稳定支持
scroll-padding 和 scroll-margin 混用时的优先级陷阱
两者共存时，浏览器会按“滚动容器的 scroll-padding → 目标元素的 scroll-margin”顺序叠加计算最终偏移。容易误以为设了 scroll-margin-top: 64px 就够了，结果发现和 scroll-padding-top: 64px 一起用，偏移变成 128px。
- 调试技巧：打开 DevTools → Elements → 选中滚动容器 → 查看 Computed 面板里的
scroll-padding实际值 - 若同时用了
scroll-behavior: smooth，偏移量仍生效，无需额外 JS 干预 - 避免在
body上设scroll-padding却忘了html才是根滚动容器（尤其在未重置body { margin: 0 }的老项目中）
移动端 Safari 中 scroll-padding 失效的典型原因
Safari（尤其是 iOS 15–16）对 scroll-padding 的解析较严格，常见失效不是属性写错，而是容器行为不满足“可滚动”前提：
- 确保滚动容器高度 ≥ 视口高度，否则 Safari 可能忽略
scroll-padding - 禁用
-webkit-overflow-scrolling: touch（已废弃），它会干扰现代滚动逻辑 - 若页面有
viewportmeta 标签且含user-scalable=no，部分旧版 Safari 会降级处理滚动锚点 - 临时验证方式：在 Safari 控制台执行
document.scrollingElement.scrollTop = 100，观察是否触发平滑滚动及偏移——不触发说明滚动上下文异常
真正要注意的不是怎么写这个属性，而是确认谁在滚动、谁被锚定、谁在遮挡——scroll-padding 只响应「滚动容器」的声明，其他地方写再多也没用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
