safari 直到 macos sonoma 14.0 / ios 17 才原生支持 scroll-behavior: smooth，且仅限 html 元素；更早版本（尤其是 ios 15.3 及以前）会静默忽略该声明——不报错、不降级、不动画，写了等于没写。
因为 Safari 直到 macOS Sonoma 14.0 / iOS 17 才原生支持 scroll-behavior: smooth，且仅限 html 元素；更早版本（尤其是 iOS 15.3 及以前）会静默忽略该声明——不报错、不降级、不动画，写了等于没写。
scroll-behavior: smooth 在 Safari 的真实支持边界
这不是写法问题，是浏览器能力断层。关键事实包括：
-
html { scroll-behavior: smooth; }在 iOS 15.4+ 才开始被解析，但仅对锚点跳转（a[href^="#"]）生效；scrollIntoView()仍需显式传参 - 任何带
overflow: auto的自定义容器（如.sidebar或.chat-log）上设置该 CSS，Safari 一律静默丢弃，哪怕你在开发者工具里看到它“存在” - 即使系统未开启
prefers-reduced-motion，旧版 Safari 也会因缺少滚动插值引擎而直接 fallback 到instant -
@supports (scroll-behavior: smooth)检测不可靠——它只查 CSS 属性是否被识别，不反映 JS 行为是否可用
为什么 smoothscroll-polyfill 在 Safari 里反而卡顿
很多项目一上来就 import 'smoothscroll-polyfill'，结果在 Safari 中滚动跳帧、目标偏移、连点后动画堆叠。根本原因在于：
- polyfill 重度依赖
MutationObserver，而 Safari 对其触发时机敏感，DOM 更新与 layout 计算不同步时，会反复重算目标位置 - 没有内置用户手动滚动中断逻辑，
cancelAnimationFrame调用滞后，导致“拉扯感”或滚动过冲 - 不对容器可见性做校验：若目标元素父级是
display: none或overflow: hidden，仍强行驱动，getBoundingClientRect()返回{ top: 0, left: 0 }，滚动直接错乱 - 默认使用
ease-in-out缓动，开头太慢、结尾易抖，和原生smooth的cubic-bezier(0.25, 0.46, 0.45, 0.94)行为差异明显
Element.scrollTo({ behavior: 'smooth' }) 的 Safari 硬性条件
用 JS 替代时，必须同时满足以下三点，behavior: 'smooth' 才能在 Safari 触发平滑滚动：
-
scroll-behavior: smooth不需要、也不能设在父容器上（Safari 忽略它） - 目标元素必须有明确的
scrollLeft/scrollTop可写权限（即不能是overflow: hidden或未触发滚动上下文） - 必须使用对象参数调用：
el.scrollTo({ top: 100, behavior: 'smooth' })；传数字或数组（如scrollTo(0, 100)）会强制跳转
真正要降级的不是“要不要平滑”，而是“要不要信任浏览器声明”。Safari 的静默忽略比报错更危险——它让你误以为功能已上线，直到用户反馈“怎么一跳就没了”。最稳妥的做法是：把 scrollIntoView 或 scrollTo 当作唯一可信入口，用 requestAnimationFrame + 线性插值兜底，而不是依赖 CSS 声明或全量 polyfill。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
