scroll-view 的 bounces 属性需配合 enhanced 才能在 iOS 生效,安卓无回弹故无感;内容高度不足时滚动未触发,bounces 不起作用;页面级回弹需 CSS + JS 双重禁用,overscroll-behavior 需穿透设置且兼容旧版 WebKit。

scroll-view 的 bounces 属性为什么设了没用?
因为 bounces 必须配合 enhanced 才能在 iOS 上生效——这是 uni-app 2.12.0+ 版本的硬性依赖,不是可选组合。很多开发者只写 :bounces="false",但漏掉 :enhanced="true",结果在 iPhone 上依然有橡皮筋效果。
-
enhanced是开关,不开启就进不了“增强滚动控制”逻辑层 - 安卓本身无回弹,所以
bounces在安卓上基本无感,别拿它验证是否成功 - 如果内容高度不足容器(比如空列表或少量数据),
scroll-y实际未触发滚动,bounces也不会起作用——得先确保能滚起来
全局禁用页面级下拉回弹(非 scroll-view 场景)
当页面没用 scroll-view,而是靠原生滚动(比如 <view> 堆高到 200vh),iOS 会默认对整个页面启用 overscroll bounce。这时要从 CSS 和生命周期双管齐下:
- 在
onLoad或mounted中检测平台:const isIOS = uni.getSystemInfoSync().platform === 'ios' - 加个
setTimeout延时 100ms,再用document.querySelector('body').style.overflow = 'hidden'——注意:直接改body可能影响微信小程序基础库兼容性,更稳妥是改最外层view容器并加position: fixed - CSS 补一刀:
.page-container { overflow: hidden; height: 100vh; },避免样式抖动
为什么 overscroll-behavior: none 有时无效?
这个 CSS 属性确实能禁用橡皮筋,但它只对「当前滚动容器及其子滚动链」生效,且依赖渲染时机和选择器穿透能力。常见失效原因:
- 没用
/deep/或::v-deep穿透到scroll-view内部生成的 .uni-scroll-view 元素 - 只写了容器,漏了内容层:
/deep/.uni-scroll-view, /deep/.uni-scroll-view-content { overscroll-behavior: none; }缺一不可 - 部分 iOS WebKit 版本(如 iOS 15.4 之前)需加
-webkit-overscroll-behavior: none - UView 等 UI 库的弹窗组件可能包裹多层 DOM,必须找到真正承载滚动的那层父元素加样式,而不是只加在你写的
scroll-view上
弹窗出现时,底层页面还在滚动?
这是典型的滚动穿透问题,尤其在 iOS + 弹窗内含 scroll-view 时高频发生。根本不是“禁用回弹”能解决的,而是要阻断滚动事件冒泡和 body 滚动锁定:
- 弹窗打开时,给页面根容器加 class:
fixed-page,对应 CSS:.fixed-page { position: fixed; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; } - 不要依赖
@touchmove.prevent,iOS Safari 对该事件拦截不彻底,且可能影响弹窗内scroll-view的正常滚动 - 如果用 UView,建议直接修改其
u-popup源码,在遮罩层(mask)上加touch-action: none,并确保 mask 的 z-index 高于所有可滚动区域
最麻烦的点往往不在主页面,而在嵌套层级深、用了第三方组件的弹窗里——这时候查 DOM 结构比猜配置更可靠。










