scroll-behavior: smooth 在 Safari ≤15.3、iOS WebView、微信 X5 及旧版 Android WebView 中完全不支持，需用 JS 替代；Safari 仅从 iOS 15.4/macOS 12.3 起支持且仅限锚点链接，html 元素 computed 样式中 scroll-behavior 显示 auto 或为空即表示不支持。
直接写 scroll-behavior: smooth 在 Safari ≤15.3、iOS WebView、微信 X5、旧版 Android WebView 中就是无效的——不是你漏了分号或 selector 写错，是这些环境压根没实现该特性。必须用 JS 替代，且不能依赖通用 polyfill。
html { scroll-behavior: smooth } 为什么在 Safari 里写了也白写
这不是兼容性“差”，而是能力断层：scroll-behavior: smooth 在 Safari 中直到 iOS 15.4 / macOS 12.3（2022 年 3 月）才开始解析，但仅对锚点链接（a[href^="#"]）生效；iOS 15.3 及更早、所有微信 X5、多数 Android WebView 都静默忽略整条声明，不报错、不降级、不动画。
在 Safari 开发者工具中检查 html 元素的 Computed 样式，若 scroll-behavior 显示为 auto 或为空，说明不支持。
-
body { scroll-behavior: smooth }在 Safari 中完全无效——滚动上下文绑定在html，不是body - 即使系统升级到 iOS 17，
scroll-behavior仍只作用于html或显式设置了overflow的容器，对普通div静默丢弃 - 某些 CSS 重置（如
* { margin: 0; }）或 Normalize.css 会意外把html的overflow设为visible，导致该属性静默失效；可显式补一句html { overflow: auto; }防止覆盖
scrollIntoView({ behavior: 'smooth' }) 在 Safari 中不动的常见原因
这个 API 比 CSS 属性支持稍早，但在 Safari 中有多个隐藏条件不满足就会退化为瞬时滚动，且不抛错。
- 必须传对象参数：
el.scrollIntoView({ behavior: 'smooth', block: 'start' })；el.scrollIntoView(true)或裸调用el.scrollIntoView()都无效 - 目标元素必须已渲染且可见：
el.offsetParent !== null且getComputedStyle(el).display !== 'none' - 避免
block: 'nearest'——Safari 中行为不可靠，固定用'start'或'center' - 若目标在
position: fixed容器内，Safari 可能错误计算位置；建议提前将目标移出 fixed 流再滚动
手写 requestAnimationFrame 补丁的关键控制点
别引入 smooth-scroll-polyfill：它在 Safari 中因 MutationObserver 触发时机差异，常卡顿、偏移、动画堆叠。30 行内可控逻辑更稳。
- 先校验目标元素是否真正可滚动：
el.offsetParent !== null && getComputedStyle(el).display !== 'none' - 滚动容器必须明确可读写：
const container = options.container || window，且不能是overflow: hidden的父级 - 用
performance.now()记录起始时间，比Date.now()更精准，避免帧率波动导致时长偏差 - 插值必须用增量更新：
container.scrollTop += delta，而非直接赋值scrollTop = target，否则 Safari 会跳帧或过冲
最易被忽略的一点是：你无法靠 @supports (scroll-behavior: smooth) 准确判断 JS 行为是否可用——它只查 CSS 属性是否被识别，不反映 scrollIntoView 的 behavior: 'smooth' 是否真实执行。真实检测必须靠运行时试探：插入临时元素、调用、监听 scroll 事件触发频次与间隔。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
