html 元素上设置 scroll-padding-top 是唯一覆盖所有锚点触发路径的可靠方案，因其仅对根滚动容器生效，而页面级滚动上下文是 html；body 或 main 上设置无效。
直接在 html 元素上设 scroll-padding-top，值匹配导航栏真实高度，是唯一能覆盖所有锚点触发路径（点击链接、修改 URL hash、前进/后退）的可靠方案。
为什么必须写在 html 上，而不是 body
scroll-padding-top 只对根滚动容器生效，而页面级滚动上下文是 html 元素（除非你手动设置了 overflow: scroll 的父容器）。写在 body 上在 Safari 15.3 及更早版本中完全不生效，Chrome 和 Firefox 虽部分支持，但行为不一致。
-
html { scroll-padding-top: 56px; }✅ 全局生效，稳定 -
body { scroll-padding-top: 56px; }❌ 多数场景无效，尤其 iOS/Safari -
main { scroll-padding-top: 56px; }❌ 不是滚动容器，无意义
Bootstrap 响应式导航高度怎么同步更新 scroll-padding-top
Bootstrap 5 的 fixed-top 导航在桌面端约 56px，小屏折叠后常缩为 48px 或 40px。硬写死一个像素值会导致大屏遮挡、小屏多留白。
- 用 CSS 自定义属性统一管理：
::root { --nav-height: 56px; } - 配合媒体查询动态更新：
@media (max-width: 767px) { :root { --nav-height: 48px; } } - 最终设在
html上：html { scroll-padding-top: var(--nav-height); } - 慎用
%单位——它按视口宽度计算，不是高度，极易错位
scroll-padding-top 失效的三个隐藏原因
即使代码写对了，也可能因底层布局干扰而静默失效：
-
html或body上写了overflow: hidden—— 这会禁用根滚动容器的 scroll padding 行为 - 目标元素本身有
transform（如translateY）或margin-top，可能干扰滚动定位逻辑（此时优先考虑scroll-margin-top） - 页面用了第三方库（如某些 SPA 路由器）劫持了原生滚动，需确认是否调用了
scrollIntoView并绕过了 CSS 滚动偏移
什么时候该换用 scroll-margin-top
当只有少数几个标题需要避让，或不同页面的固定区域高度不统一（比如首页带 banner、其他页没有），scroll-margin-top 更灵活：
- 直接加在目标元素上：
h2#about { scroll-margin-top: 60px; } - 它不依赖全局状态，也不受媒体查询限制，每个元素可独立设置
- 注意：不能写在
body或main上——这个属性只对带id或name的锚点元素本身有效 - 若导航栏高度响应式变化，就得给每个目标元素写多套规则，维护成本明显上升
真正难的是测出那个“刚好不遮、不多留”的像素值——别信 Bootstrap 文档写的 56px，用浏览器 DevTools 量真实渲染高度，再减去 1~2px 防止四舍五入误差。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
