Safari 直到 iOS 15.4/macOS 12.3 才支持 scroll-behavior: smooth，且仅限 body 或 overflow:auto/scroll 容器；触发条件苛刻，需目标可见、父容器有明确高度+溢出，否则退化为瞬时滚动。
scroll-behavior: smooth 在 Safari 里不生效？
它确实不生效——Safari 直到 iOS 15.4 / macOS Monterey 12.3 才开始支持 scroll-behavior，且仅限于 body 和有 overflow: auto/scroll 的容器。更关键的是：Safari 对 scroll-behavior 的触发条件极苛刻，比如用 location.hash 跳转或 scrollIntoView() 时，若目标元素不在视口内、或父容器没设置明确高度+溢出，行为会直接退化为瞬时滚动。
实操建议：
- 别依赖 CSS 做跨浏览器平滑滚动，尤其要兼容 iOS 14 及更早版本时，
scroll-behavior必须视为“可选增强”而非基础能力 - 检查目标容器是否设置了
height或max-height+overflow: auto；Safari 不认overflow-y: scroll单独写法 - 用
getComputedStyle(el).scrollBehavior检测运行时支持，而不是只查 UA
scrollIntoView({ behavior: 'smooth' }) 兼容性陷阱
这个 API 看似现代，但 Android WebView（尤其旧版 Chrome WebView）和部分 Electron 版本中，behavior: 'smooth' 会被静默忽略，回退成默认跳转，且不报错、不触发 onerror。更隐蔽的问题是：它对 block 和 inline 对齐参数的处理在各浏览器中差异极大，比如 Firefox 在 flex 容器里可能完全失效。
实操建议：
- 永远 fallback 到 JS 实现：检测
el.scrollIntoView是否支持{ behavior: 'smooth' }，方法是调用一次并监听scroll事件是否连续触发（瞬时滚动只触发一次） - 避免在
display: contents或transform祖先元素下使用；这些会让目标元素的“可视区域计算”失准 - 不要传
{ block: 'nearest' }期望自动选择最短距离——Chrome 和 Safari 对 “nearest” 的判定逻辑不同，结果可能相反
用第三方库做平滑滚动时，为什么页面卡顿？
常见原因是库内部用 requestAnimationFrame 驱动，但没做节流或取消机制，当用户快速连续触发滚动（比如连点锚点、滚动中又点击），会产生多个并发动画帧队列，CPU 负载飙升。另一个典型问题是库监听了 scroll 事件却没用 { passive: true }，导致 Chrome 主线程被阻塞，触摸滚动变卡顿。
实操建议：
- 优先选轻量方案：如
smooth-scroll-into-view-if-needed（仅 2KB），它内置 cancelable、自动降级、且不劫持原生scroll - 如果用
scroll-behavior-polyfill，必须手动调用polyfill().cancel()清理上一次动画，否则内存泄漏+动画叠加 - 所有自定义滚动监听必须加
{ passive: true }，否则 iOS Safari 会强制同步执行，拖拽直接卡死
CSS 和 JS 平滑滚动混用时的冲突点
当你同时设了 scroll-behavior: smooth 和手动调用 el.scrollTo()，Chrome 会优先走 CSS 行为，而 Firefox 可能按 JS 调用执行——行为不一致。更麻烦的是，某些平滑库（如 locomotive-scroll）会接管整个文档滚动，此时 scroll-behavior 完全失效，且 scrollIntoView 也不再触发原生行为。
实操建议：
- 项目里只保留一种平滑机制：要么纯 CSS（仅限现代浏览器兜底场景），要么纯 JS（推荐）；禁止混合
- 如果用了自定义滚动库，就彻底移除
scroll-behavior声明，否则调试时容易误判问题来源 - 服务端渲染（SSR）页面要注意：JS 库初始化前，CSS 的
smooth可能已生效一次，造成首屏滚动“闪一下”，需在 JS 加载完成前用document.documentElement.style.scrollBehavior = 'auto'锁定
事情说清了就结束。最常被忽略的，是「滚动目标是否真正可滚动」——哪怕代码全对，只要父容器 overflow 是 visible 或没高度，所有平滑行为都会当场失效，且没有任何提示。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
