Safari 中 scroll-behavior: smooth 仅在 macOS Sonoma 14.0 / iOS 17+ 的 html 元素上生效，对 div 等容器静默忽略；JS 滚动需满足容器可滚动、不用 scroll-behavior、用对象参数等条件。
scroll-behavior: smooth 在 Safari 中不生效，不是你写错了，是它压根不认——尤其对 div 等普通容器，Safari 会静默忽略，连控制台警告都没有。
为什么 scroll-behavior: smooth 在 Safari 里等于没写
Safari 直到 macOS Sonoma 14.0 / iOS 17 才原生支持该属性，且仅限 html 元素；body 或任意 overflow: auto 的 div 上设置，一律被丢弃。旧版（iOS 15.3 及以前）完全不解析该 CSS 声明，既不报错也不 fallback。
-
html { scroll-behavior: smooth; }在 iOS 15.4+ 仅对锚点跳转（如a[href^="#"]）生效，scrollIntoView()仍需显式传参 - 即使写了，若页面有
height: 100vh; overflow: hidden等布局干扰，滚动上下文失效，行为直接退化为瞬时滚动 -
@supports (scroll-behavior: smooth)不可靠——它只检测 CSS 属性是否被识别，不反映 JS 滚动行为是否可用
Element.scrollTo() 在 Safari 中触发平滑滚动的硬性条件
scrollTo({ top, behavior: 'smooth' }) 能用，但必须同时满足三个条件，缺一不可，否则 Safari 仍会跳转而非平滑滚动：
- 目标容器不能设
scroll-behavior: smooth（Safari 忽略它，反而可能干扰 JS 行为） - 容器必须可滚动：
getComputedStyle(container).overflow至少含auto或scroll，且已触发滚动上下文（比如有明确height+ 内容溢出） - 必须用对象参数调用：
container.scrollTo({ top: 100, behavior: 'smooth' })；传数组或数字（如scrollTo(0, 100)）强制瞬时跳转
scrollIntoView({ behavior: 'smooth' }) 的 Safari 隐形坑
这个 API 虽然支持较早（iOS 15.4+），但实际表现极不稳定：
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
立即学习“前端免费学习笔记（深入）”；
- 对
position: fixed容器内的元素，Safari 错误计算滚动距离，常滚过头或不到位 -
block: 'nearest'在 Safari 中无统一逻辑，不同机型结果可能相反，务必显式指定block: 'start'或block: 'center' - 目标元素若处于
display: none或visibility: hidden，Safari 静默失败——调用前必须校验el.offsetParent !== null
别引入 smooth-scroll-polyfill，手写 30 行更稳
全量 polyfill 在 Safari 中容易卡顿、偏移错乱，主因是它依赖 MutationObserver，而 Safari 的 layout timing 与其他浏览器不一致，导致插值目标反复跳变。
- 优先用
requestAnimationFrame+ 线性插值封装，核心只做三件事：校验可见性、用getBoundingClientRect()算相对位置、增量更新scrollTop - 避免直接赋值
container.scrollTop = target，改用container.scrollTop += delta，防止 Safari 回弹抖动 - 插值起始时间用
performance.now()，比Date.now()更精准，避免帧率波动影响时长
真正麻烦的不是“怎么实现平滑”，而是“怎么确保每次都不错位”——目标是否渲染完成、父容器是否真可滚动、用户是否中途手动拖拽，这些边界条件必须显式判断，没法靠一个 CSS 属性兜底。
