Smooth Scroll 在 Safari 上为什么不生效?

熙然~ 阅读 17

我在项目里用了 scroll-behavior: smooth; 实现页面锚点平滑滚动,Chrome 和 Firefox 都没问题,但在 Safari 上完全没效果,还是瞬间跳转。

查了下资料说 Safari 支持需要加前缀?但我试了 -webkit-scroll-behavior: smooth; 也没用。是不是还有别的写法或者需要 JS 回退方案?

html {
  scroll-behavior: smooth;
}
我来解答 赞 14 收藏
二维码
手机扫码查看
1 条解答
紫萱
紫萱 Lv1
应该是 Safari 对 scroll-behavior 的支持还不完整(尤其旧版本),而且加 -webkit- 前缀确实没用——这属性目前还不支持前缀。
先确认 Safari 版本(14+ 才支持),如果还要兼容旧版,直接上 JS 回退方案:
document.documentElement.style.scrollBehavior = 'smooth'

或者用 scrollIntoView({ behavior: 'smooth' }) 替代锚点跳转,实测 Safari 全兼容。
点赞 2
2026-02-23 18:13