scroll-padding-top 必须写在 html 上才生效，因浏览器根滚动容器是 html 元素；scroll-margin-top 需作用于目标元素本身，且高度值须严格匹配 fixed 导航栏真实像素高度，并配合 :root 变量统一管理。
scroll-padding-top 必须写在 html 上才生效
浏览器的根滚动容器是 html 元素，不是 body。写在 body 上基本无效，尤其在 Safari 和旧版 Edge 中完全不触发。Chrome 里偶尔“看起来有效”，但属于非标准行为，上线后极易出问题。
常见错误包括：
-
body { scroll-padding-top: 64px; }❌ -
main { scroll-padding-top: 64px; }❌（除非你手动设了overflow: scroll） -
html { overflow: hidden; }❌——这会直接禁用scroll-padding-top行为
正确写法只有一行：html { scroll-padding-top: var(--nav-height); }，配合 :root 变量统一管理高度。
scroll-margin-top 要作用于目标元素本身
这个属性不是全局偏移，而是告诉浏览器：“当滚动到这个元素时，把它顶部对齐到视口顶部往下偏移 Npx 的位置”。它只对该元素生效，且必须写在目标元素上。
立即学习“前端免费学习笔记（深入）”；
典型失效场景：
-
:target { scroll-margin-top: 64px; }⚠️ —— Safari 偶现不生效，且无法适配多高度导航栏 -
body { scroll-margin-top: 64px; }❌ —— body 不是锚点目标，不会被滚动吸附 - 目标元素还没渲染完成就触发跳转（比如 SSR hydration 前），
scroll-margin-top不起作用
推荐写法：#about, #contact, h2[id] { scroll-margin-top: var(--nav-height); }，再用媒体查询适配响应式高度。
高度值必须严格匹配 fixed 头部真实视觉高度
scroll-padding-top 和 scroll-margin-top 的数值不是“大概估”，而是要等于导航栏的 实际像素高度，含 border、padding，不含 box-shadow。
容易踩的坑：
- 用
%或em单位——scroll-margin-top不支持百分比；scroll-padding-top用%是按视口宽度算的，不是高度 - 硬编码多个地方，比如 CSS 里写死
64px，JS 里又写64，改一处漏一处 - 移动端导航栏高度变矮（比如从 64px → 48px），但没同步更新 CSS 变量或媒体查询
稳妥做法：:root { --nav-height: 64px; }，然后所有相关样式都引用该变量。
别忘了给 body 加 padding-top 预留空间
scroll-padding-top 只影响锚点滚动行为，不改变文档流。首屏内容仍会被 fixed 导航栏盖住，所以还得让主内容区域下移。
优先用 padding-top，而不是 margin-top：
-
margin-top在 Safari 或某些 WebView 中可能引发滚动错位或布局抖动 -
body { padding-top: var(--nav-height); box-sizing: border-box; }更稳定，且不影响scrollIntoView()行为 - 如果导航栏高度响应式变化，别用 JS 动态改
padding-top，改用媒体查询 + CSS 变量
注意：若页面用了 position: sticky 替代 fixed，padding-top 仍需保留，否则首屏文字会被遮挡。
真正线上故障八成来自两个地方：一是 html 或 body 被意外加了 overflow: hidden，二是导航栏高度算错了——比如把 height: 4rem 当成 40px，实际是 64px。调试时先打开 DevTools 检查这两个点。
