scroll-padding-top 必须作用于 html 元素而非 body，且需配合 scroll-behavior: smooth 同时设置在 html 上；其值应严格匹配导航栏视觉总高度（含 padding、border、box-shadow），响应式场景需用媒体查询或 clamp() 动态调整；它仅影响滚动终点，不干扰布局、无障碍和打印样式，兼容 chrome 89+、firefox 90+、safari 15.4+ 等现代浏览器。
scroll-padding-top 必须写在 html 上，不是 body
浏览器的根滚动容器是 html 元素，不是 body。把 scroll-padding-top 写在 body 上完全无效——哪怕样式能被 DevTools 识别，也不会影响任何锚点滚动行为。这是最常被忽略的硬性前提。
常见错误现象：body { scroll-padding-top: 64px; } 看似合理，但刷新页面后跳转依然遮挡；换成 html { scroll-padding-top: 64px; } 立刻生效。
- 必须作用于
html，且不能被overflow: hidden或overflow: clip覆盖（否则滚动容器失效） -
scroll-behavior: smooth也得加在html上才管用，只加body是白搭 - 若项目用了 CSS-in-JS 或 Shadow DOM，需确认该样式确实注入到了 document 的
html节点上，而非 scoped 容器内
值要严格匹配导航栏「视觉总高度」，不是 CSS height
导航栏实际占据的垂直空间 ≠ 它的 height 值。比如一个 fixed-top 导航栏：CSS 设了 height: 56px，但还有 padding: 12px 0、border-bottom: 1px solid #eee，甚至 box-shadow: 0 2px 4px rgba(0,0,0,0.05) 向下延伸——这些都会增加视觉遮挡范围。
正确做法是打开 DevTools → Elements → 选中导航栏 → 切到 Computed 面板，看 height + padding-top + border-top-width + box-shadow 垂直偏移量（如有），加总后填入 scroll-padding-top。
- 推荐用
rem或px，避免用%（它按视口宽度计算，和高度无关） - 如果导航栏高度响应式变化（如移动端折叠），必须配合媒体查询或
clamp()动态调整，不能写死一个值 - Bootstrap 5 默认桌面端约 56px，小屏常为 48px，硬写
56px在手机上会多留白
它不干扰布局，和 padding-top + margin-top 有本质区别
老方案常用 padding-top 加负 margin-top 模拟“留空”，但这会真实改变文档流：打印样式错乱、无障碍阅读器误判结构、响应式断点里元素位置偏移、flex/grid 布局意外塌陷。
scroll-padding-top 只改滚动终点，不影响盒模型、不触发重排、不改变 DOM 几何属性——它是纯滚动行为层的声明式修正。
- 它对
position: sticky、transform、filter等布局变形完全免疫 - 即使目标元素本身有
margin-top: 20px或transform: translateY(-10px)，也不影响滚动定位精度 - 所有锚点触发路径都覆盖：URL 直接访问、
history.pushState、前进/后退按钮、书签点击
兼容性已足够好，但旧 Safari 需留意降级边界
Chrome 89+、Firefox 90+、Safari 15.4+、Edge 110+ 均原生支持。iOS 15.4 / macOS Monterey 12.3 是关键分水岭。如果你的用户基本在 iOS 16+ 或 Android Chrome 上，可放心启用。
真正容易被忽略的是：Safari 15.3 及更早版本不支持，但 @supports (scroll-padding-top: 1px) 在这些旧版里会直接返回 false，无法安全检测。若必须兼容，只能靠 UA 判断或服务端特征嗅探。
- 不要依赖
scroll-margin-top降级——它和scroll-padding-top解决的是不同层级的问题，混用反而导致行为冲突 - JS 降级方案（监听
hashchange+scrollBy）会引发两次滚动，有闪烁风险，仅当真有 iOS 15.2 用户时再启用 - 若项目已用
scroll-behavior: smooth，记得把它和scroll-padding-top一起写在html上，否则平滑效果可能被截断
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
