已配置scrollAssist仍无效,Ionic3如何禁用iOS滚动弹跳效果?
解决Ionic3中iOS滚动弹跳无法禁用的问题
首先得说清楚:你之前配置的scrollAssist和autoFocusAssist是用来控制输入框聚焦时的滚动辅助和自动聚焦行为的,和iOS的滚动弹跳(就是那种拉到底部/顶部会弹一下的效果)完全是两回事,所以iOS没反应是正常的。
要禁用iOS的滚动弹跳,我给你几个靠谱的方案,从全局到局部都有:
1. 用Cordova配置彻底禁用全局弹跳(最推荐)
直接修改项目根目录下的config.xml,添加这个偏好设置:
<preference name="DisallowOverscroll" value="true" />
这个配置是直接告诉iOS的WebView不要允许过度滚动,属于底层设置,效果最彻底,不管你用的是Ionic的自定义滚动还是原生滚动,都能生效。
2. Ionic全局配置补充
在你现有的app.module.ts配置里,加上bouncingScroll: false,让Ionic的组件层面也禁用弹跳:
IonicModule.forRoot(MyApp, { scrollAssist: false, autoFocusAssist: false, bouncingScroll: false // 全局禁用Ionic组件的滚动弹跳 })
这个配置主要针对Ionic自己的滚动组件,和上面的config.xml配置配合使用,能覆盖更多场景。
3. 页面级单独禁用(按需使用)
如果只想禁用某个特定页面的弹跳,直接在该页面的ion-content标签里加上bounce="false"属性就行:
<ion-content bounce="false"> <!-- 你的页面内容 --> </ion-content>
特殊情况:如果用了原生滚动(overflow-scroll="true")
要是你的页面开启了原生滚动(也就是给ion-content加了overflow-scroll="true"),上面的Ionic配置可能失效,这时候除了用config.xml的配置外,还可以在页面的SCSS里加这段样式来强化效果:
ion-content[overflow-scroll="true"] { overflow: auto; -webkit-overflow-scrolling: touch; } /* 可选:隐藏原生滚动条 */ ion-content[overflow-scroll="true"]::-webkit-scrollbar { display: none; }
按照这个顺序试下来,iOS的滚动弹跳应该就能彻底禁用了。
内容的提问来源于stack exchange,提问作者Abhee
相关产品推荐
相关产品推荐

