Safari 仅从 macOS Sonoma 14.0 和 iOS 17 起支持 scroll-behavior: smooth，且仅限 html/body；对普通 overflow 容器静默忽略，旧版完全不支持；polyfill 在 Safari 中因 MutationObserver 时机差异易卡顿；推荐用 requestAnimationFrame 手写轻量滚动逻辑。
它在 Safari 里本来就不该“有效”——不是你写错了，是 Safari 压根不认这个声明（尤其对普通容器）。
scroll-behavior: smooth 在 Safari 的真实支持范围
Safari 直到 macOS Sonoma 14.0 和 iOS 17 才原生支持 scroll-behavior: smooth，且仅限 html 或 body 元素；对任意带 overflow: auto 的 div 容器，Safari 会静默忽略该 CSS 声明，既不报错也不降级。
- 旧版 Safari（≤15.3）完全不解析该属性，CSS 规则被丢弃
- iOS 15.4–16.x 虽支持，但仅对
scrollIntoView({ behavior: 'smooth' })有效，scroll-behavior仍被忽略 - 即使写在
html上，若页面有height: 100vh; overflow: hidden等布局干扰，也会导致滚动容器失效
为什么 smoothscroll-polyfill 在 Safari 里反而更卡
很多项目直接 import 'smooth-scroll-polyfill'，结果在 Safari 中滚动卡顿、偏移错乱，甚至触发多次回调——根本原因是 polyfill 依赖 MutationObserver，而 Safari 对其触发时机和频率的处理与其他浏览器不一致。
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- polyfill 会监听 DOM 变化并重试滚动，但在 Safari 中常因 layout timing 差异导致插值目标跳变
- 它没有内置 cancel 机制，用户快速连点锚点时，多个动画帧队列叠加，CPU 负载飙升
- 不区分容器是否真正可滚动（比如
overflow: hidden或display: none父级），强行驱动导致计算失准
更轻、更稳的替代方案：30 行 requestAnimationFrame 封装
与其引入全量 polyfill，不如针对实际场景（如几个导航锚点跳转）手写可控逻辑。核心是三件事：校验可见性、用 el.getBoundingClientRect() 算相对位置、线性插值 + requestAnimationFrame 驱动。
立即学习“前端免费学习笔记（深入）”；
- 先检查
el.offsetParent !== null，避免对display: none元素调用 - 目标必须在可滚动父容器内，且该父容器已设置明确
height和overflow: auto - 不要传
scrollTop绝对值，而是用container.scrollTop += delta增量更新，防止 Safari 回弹抖动 - 示例关键片段：
function smoothScrollTo(el, container = window) {<br> const targetTop = el.getBoundingClientRect().top + container.scrollTop;<br> const start = container.scrollTop;<br> const duration = 300;<br> let startTime = null;<br> function step(timestamp) {<br> if (!startTime) startTime = timestamp;<br> const progress = Math.min((timestamp - startTime) / duration, 1);<br> container.scrollTo(0, start + (targetTop - start) * progress);<br> if (progress < 1) requestAnimationFrame(step);<br> }<br> requestAnimationFrame(step);<br>}
真正容易被忽略的是：Safari 下的平滑滚动从来不是“加个 CSS 就完事”，而是要同时控制「目标是否挂载」「父容器是否可滚动」「是否被 fixed 元素遮挡」「是否触发了 scroll event」——每个环节断掉，都会退化为瞬时跳转，且不提示、不报错。
