scroll-margin-top 支持 CSS 变量但需带单位且定义在 :root，否则无效；兼容性上 Safari ≤15.3 不支持，clamp() 仅 15.4+ 稳定；prefers-reduced-motion 启用时会静默失效，须 JS 降级处理。
scroll-margin-top 支持 CSS 变量，但必须带单位且定义在 :root
直接写 scroll-margin-top: var(--nav-height) 是无效的——变量值必须带单位（如 64px 或 4rem），且只能在 :root 或目标元素祖先作用域中声明。浏览器不会自动给无单位数字补单位，也不会从父元素继承变量值。
常见错误现象：getComputedStyle(el).scrollMarginTop 返回 0px 或空字符串；锚点跳转后仍被导航栏遮挡。
-
--nav-height必须在:root中定义：:root { --nav-height: 64px; } - 目标元素上使用：
h2[id] { scroll-margin-top: var(--nav-height); } - 若需响应式适配，可在媒体查询中覆盖：
@media (max-width: 768px) { :root { --nav-height: 56px; } } - 避免用 JS 动态改
style.setProperty('--nav-height', '56px')后立刻触发滚动——scroll-margin-top的计算发生在布局阶段，异步更新可能错过时机
clamp() 能增强容错，但 Safari ≤15.3 完全不支持
scroll-margin-top 支持 clamp()，可用于防错：比如导航高度不确定时，设成 clamp(48px, var(--nav-height), 80px)。但这不是万能的——Safari 15.3 及更早版本压根不解析 scroll-margin-top，哪怕写了也当不存在。
真实兼容性陷阱：
立即学习“前端免费学习笔记（深入）”；
- Safari 15.4+ 才稳定支持
clamp()在scroll-margin-top中的计算，旧版会 fallback 到第一个值（48px） - Chrome 和 Firefox 对
clamp()支持良好，但若变量未定义，整个表达式会退化为initial，即0px - 不要混用单位：
clamp(1rem, var(--nav-height), 64px)在部分旧版 Safari 中会失效
prefers-reduced-motion 开启时，scroll-behavior 和 scroll-margin-top 都可能静默失效
即使你把 scroll-margin-top 写得再精准，只要用户系统开启了“减少动画”，Chrome/Firefox 会直接禁用 scroll-behavior: smooth，且部分场景下 scroll-margin-top 补偿也会被忽略——这不是 bug，是规范行为。
真正可落地的应对方式只有两个：
- 用 JS 主动检测并降级：
window.matchMedia('(prefers-reduced-motion: reduce)').matches，然后切换html.no-smoothclass，让scroll-behavior回退到auto - 对关键锚点，改用
element.scrollIntoView({ behavior: 'smooth', block: 'start' })并手动加scroll-margin-top偏移逻辑（例如window.scrollBy(0, -parseInt(getComputedStyle(el).scrollMarginTop) || 0)） - 注意：iOS Safari 和微信 X5 WebView 对
matchMedia的change事件支持不稳定，必须在DOMContentLoaded后主动读一次
别指望用变量控制 scroll-behavior 本身
scroll-behavior: var(--smooth, smooth) 在所有主流浏览器中都会被忽略，回退到 auto。它不是动画属性，而是原生滚动开关，值在 CSS 解析时就被固化，不参与级联、不响应变量变更。
想动态启停平滑滚动，唯一可靠路径是 JS 切换 class：
html { scroll-behavior: smooth; }html.no-smooth { scroll-behavior: auto !important; }document.documentElement.classList.toggle('no-smooth', reducedMotion)
变量在这里只适合做补偿偏移，不是行为开关。最常被忽略的一点：很多人花时间调 --scroll-easing 这类根本不存在的变量，却没检查 scroll-margin-top 是否真被应用到了目标元素的 computed 样式里。
