场景:页面滚动到最低,触发ios系统回弹,也有叫橡皮筋效果。页面卡死滚动不了
原因:布局出现问题+ios系统本身原因
解决:1、页面中不设置height,不设置overflow,内部滚动部分padding-bottom底部定位的高度,下定位(合理布局不会出现)。
2、如果页面有onscroll事件,必须设置height,overflow。
外层div
height:100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
引入inobounce.js
import inobounce from 'inobounce'
created(){
let u = navigator.userAgent
if (u.indexOf('iPhone') > -1) {
inobounce.enable()
}
},
beforeDestroy() {
inobounce.disable()
},
注:如果1个工程引用了inobounce.js,在当前页面。其他路由的页面flow布局也会受到影响,要加上height、overflow 和-webkit-overflow-scrolling
如果是规律的列表,ios可以使用mescroll.js,里面有针对ios回弹和定位问题的处理方案