scroll-behavior: smooth 在 Safari ≤15.3、iOS WebView、微信 X5 中完全不支持，仅从 iOS 15.4/macOS 12.3 起对锚点链接生效；必须用 JS 实现 scrollIntoView({behavior:'smooth'}) 并校验可见性、避免 fixed 容器、使用 scroll-margin-top 解决导航栏遮挡。
直接写 html { scroll-behavior: smooth } 在 Safari ≤15.3、iOS WebView、微信 X5 里就是无效的——不是你漏了分号或 selector 写错，是这些环境压根没实现该特性。必须用 JS 替代，且不能依赖通用 polyfill。
为什么 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静默丢弃
scrollIntoView({ behavior: 'smooth' }) 在 Safari 中不动的常见原因
这个 API 比 CSS 属性支持稍早，但有多个隐藏条件不满足就会退化为瞬时滚动，且不抛错。
- 必须传对象参数：
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 行内可控逻辑更稳。
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
立即学习“前端免费学习笔记（深入）”；
- 先检测原生支持：
typeof Element.prototype.scrollIntoView === 'function'+ 尝试调用后监听 scroll 是否连续触发 - 用匀速 easing（非贝塞尔），起始
scrollTop、目标offsetTop、总时长 400ms，每帧按比例更新 - 防抖：同一目标多次调用时，清除前一个
requestAnimationFrameID - 校验可见性：
el.offsetParent !== null，避免对display: none元素调用 - 目标必须在可滚动父容器内，且该父容器已设置明确
height和overflow: auto
锚点跳转后内容被固定导航栏遮挡怎么解
scroll-margin-top 是唯一正解，但它只对程序化滚动（scrollIntoView 或锚点跳转）生效，对 scrollTo() 无效。
- 给目标元素加
scroll-margin-top: 60px（值等于导航栏高度），浏览器会在平滑滚动结束时自动预留空白 - 若导航栏高度不固定（如响应式折叠），优先用
scrollIntoView({ block: 'start', behavior: 'smooth' })配合 padding 补偿 - 不要手动减去
offsetTop——会破坏惯性、回弹和scroll事件时机
真正容易被忽略的是：Safari 对滚动容器的判定极其严格——哪怕你看到页面有滚动条，只要 html 元素的 overflow 被重置（比如被 * { margin: 0 } 清掉），或者用了 height: 100vh; overflow: hidden 等布局干扰，scroll-behavior 就会静默失效。得先确保 html { height: 100%; overflow: auto; } 显式存在。
