场景:页面滚动到最低,触发ios系统回弹,也有叫橡皮筋效果。页面卡死滚动不了
原因:布局出现问题+ios系统本身原因
解决:1、页面中不设置height,不设置overflow,内部滚动部分padding-bottom底部定位的高度,下定位(合理布局不会出现)。
2、如果页面有onscroll事件,必须设置height,overflow。

npm install inobounce -s

外层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回弹和定位问题的处理方案

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐