Smooth Scroll 在 Safari 上为什么不生效? 熙然~ 提问于 2026-02-23 18:11:16 阅读 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 加载更多 相关推荐 2 回答 45 浏览 移动端的Smooth Scroll为什么失效了? 大家好,我在给网页加平滑滚动效果时遇到个怪问题。用了scroll-behavior: smooth后,桌面端点击锚点都能平滑滚动,但手机测试直接跳转。我查了CSS优先级没问题,还试过用JavaScri... 司空子璐 交互 2026-02-04 14:01:25 2 回答 27 浏览 Safari调试时为什么无法在控制台看到console.log输出? 我在用Safari调试移动端网页时,明明写了console.log('测试'),但控制台完全没反应,折腾了一下午没解决。之前用Chrome没问题,换到Safari后: 1. 已经在设置里打开了「开发」... 慧娜 Dev 移动 2026-02-17 19:42:26 1 回答 28 浏览 React中scroll事件触发的动画为什么会有延迟和卡顿? 我用React做页面滚动动画时遇到了问题。当我用window.addEventListener('scroll')监听滚动位置,并用useState更新动画数值时,动画总会有半秒左右的延迟,滑动页面时... ♫乐佳 交互 2026-02-11 13:20:27 1 回答 9 浏览 H5页面在iOS Safari上fixed定位失效怎么办? 我最近在做移动端H5页面,有个底部导航栏用了 fixed 定位,但在 iOS 的 Safari 上滑动页面时它会跟着滚动,完全没固定住,安卓机却正常。是不是 Safari 对 fixed 支持有问题?... UI燕伟 移动 2026-03-02 07:27:19 1 回答 17 浏览 H5页面在iOS Safari里为啥无法自动播放音频? 我做了一个H5活动页,需要进入页面就自动播放背景音乐,但在iPhone的Safari上死活不播,安卓Chrome却没问题。查了说是浏览器策略限制,但我不确定是不是我代码写得不对。 我试过加muted属... UX-梓晴 移动 2026-02-26 23:11:21 2 回答 32 浏览 uni-app中如何让scroll-view在H5和App端滚动效果一致? 我在用uni-app开发一个跨端应用,发现scroll-view在H5上滑动很流畅,但在App端(尤其是iOS)滚动特别卡顿,而且惯性滚动也没了。试过加:scroll-with-animation="... 松浩的笔记 移动 2026-02-25 04:34:22 2 回答 18 浏览 vue-virtual-scroller滚动时滚动条不联动怎么解决? 在用vue-virtual-scroller做长列表时,发现滚动条和内容不同步,拖动滚动条内容没动,但滑动内容时滚动条能动。尝试过设置容器高度和overflow,还是不行。代码结构如下: <te... 程序猿付敏 优化 2026-02-18 15:18:36 2 回答 69 浏览 Lynx框架中Scroll组件嵌套使用时滚动失效怎么办? 在用Lynx开发移动端页面时,给外层容器套了Scroll组件,里面又嵌套了一个可横向滚动的子Scroll,结果内部滚动完全没反应。折腾了一下午,尝试过设置fixed定位和调整z-index都不行...... UP主~乐萱 移动 2026-02-15 05:44:33 2 回答 112 浏览 Hummer中滚动事件scroll在页面不触发怎么办? 在用Hummer开发页面时,给scroll-view绑定了v-on:scroll="handleScroll",但滚动时方法完全没反应。尝试过设置scroll-y="true"和enable-scro... 公孙弯弯 框架 2026-02-14 01:02:33 2 回答 30 浏览 React Native中ScrollView的子元素按百分比设置宽度无效怎么办? 在React Native里用ScrollView装了几个卡片组件,给子元素设置了flexBasis: '50%',但它们还是堆在一起显示。我试过加flexGrow:1和flexShrink:1,也调... 诗谣 Dev 移动 2026-02-10 03:46:23
scroll-behavior的支持还不完整(尤其旧版本),而且加-webkit-前缀确实没用——这属性目前还不支持前缀。先确认 Safari 版本(14+ 才支持),如果还要兼容旧版,直接上 JS 回退方案:
或者用
scrollIntoView({ behavior: 'smooth' })替代锚点跳转,实测 Safari 全兼容。