CSS 的 scroll-behavior: smooth 在 Safari ≤15.3、iOS WebView、微信 X5 等环境不被支持，需用 requestAnimationFrame 手写 JS 回退；scroll-margin-top 可解决导航栏遮挡锚点问题，但仅对程序化滚动生效。
scroll-behavior: smooth 无法真正“兼容”旧版浏览器——它在 Safari ≤15.3、iOS WebView、微信 X5 等环境里就是不被识别，不是写法问题，是引擎压根没实现。你得用 JS 回退，而不是指望 CSS 生效。
为什么 html { scroll-behavior: smooth } 在 Safari 里没反应？
这不是你漏写了或 selector 错了。Safari 直到 15.4 才开始支持该属性（2022 年 3 月发布），而大量存量 iOS 设备仍运行 15.3 及更早系统；微信内置浏览器（X5 内核）至今未启用该特性，写了也静默忽略。
- 检查 computed 样式：打开 Safari 开发者工具 → 选中
html元素 → 查看scroll-behavior是否显示为smooth；若显示auto或为空，说明不支持 - 别写
body { scroll-behavior: smooth; }—— 页面级滚动容器是html，body上设无效 - 重置 CSS（如
* { margin: 0; }）可能清除了html的overflow: auto或默认高度，导致它失去滚动能力，需显式补上html { height: 100%; overflow: auto; }
scrollIntoView({ behavior: 'smooth' }) 为什么在 iOS 上不动？
这个 API 比 CSS 属性支持稍早（Safari 15.4+），但有多个隐藏条件不满足就会退化为瞬时滚动，且不报错。
- 必须显式传对象：
el.scrollIntoView({ behavior: 'smooth', block: 'start' })；el.scrollIntoView(true)或裸调用都无效 - 目标元素必须已渲染且可见：
el.offsetParent !== null且getComputedStyle(el).display !== 'none' - 避免
block: 'nearest'—— Safari 中行为不可靠，固定用'start'或'center' - 若目标在
position: fixed容器内，Safari 可能错误计算位置；建议提前将目标移出 fixed 流再滚动
怎么写一个轻量、可控的 JS 回退方案？
不用引入 smooth-scroll-polyfill —— 它在 Safari 中常卡顿、偏移、动画堆叠，根本原因是依赖事件监听和定时器叠加，稳定性差。手写 requestAnimationFrame 更直接。
立即学习“前端免费学习笔记（深入）”；
- 先检测原生支持：
'scrollBehavior' in document.documentElement.style只判断 CSS，不够；应结合typeof Element.prototype.scrollTo === 'function'+ 尝试调用后监听scroll事件是否连续触发 - 回退逻辑用匀速 easing（非贝塞尔）更稳：起始
scrollTop、目标offsetTop、总时长 400ms，每帧按比例更新 - 注意防抖：同一目标多次调用时，清除前一个
requestAnimationFrameID - 处理锚点未渲染场景：若
el.offsetTop === 0，用requestAnimationFrame(() => scroll())延迟一帧再取值
移动端锚点跳转后内容被导航栏遮住怎么办？
这不是 JS 计算 offset 的问题，是浏览器把目标顶部对齐视口顶部，而 position: fixed 导航栏挡住了。CSS 就能解，无需 JS。
- 在目标元素上加
scroll-margin-top: 60px（值等于导航栏高度） - 避免用百分比（
%）—— 触发时机不稳定；可用clamp(50px, 8vh, 80px)做响应式适配 -
scroll-margin-top只对锚点跳转和scrollIntoView()生效，对scrollTo()无效 - 别混淆
scroll-padding-top—— 它作用于整个视口，不是锚点补偿
最易被忽略的一点：scroll-behavior 和 scroll-margin-top 都只影响“程序化滚动”，也就是锚点点击或 JS 调用触发的滚动；用户手动滚轮/拖动滚动条永远是瞬时的，这属于浏览器设计，任何方案都无法改变。
