现象:
使用iphone6 plus、iphone7 plus、iphone6s plus,在上拉检索商品的页面,页面是每20件商品显示一页,到底后,上拉加载下一页的商品数据。快速想上滑动,当滑动一定的页面数之后(具体视情况而定),会偶尔出现页面粘黏,无法滑动的场合。并不是每次都会出现这种情况。
页面是使用react.js构造的单页面应用。
问题:
现在问题的定位点有些不清楚
(1)从目前的状况看,安卓侧是没有出现这个问题,只有ios侧会出现这种问题,是否是因为ios系统本身会有这个粘黏的问题;
(2)需要翻动到一定的页面数才会出现这种情况,但是并不是很大几率;
(3)滚动页面dom的构成是p+p去做的,并没有通过流行的p + ul + li这种标签构造滚动页面dom,是否用p+p这种方式有隐藏的问题;
(4)使用react.js去渲染页面,是否因为利用不当造成了这种页面粘黏的情况,即javascript的处理造成的;
以上的问题,如果有遇到并且解决过的,请帮忙了。
这种情况应该是因为使用了-webkit-overflow-scrolling:touch属性导致的,webview会为添加了此属性的元素添加一层进行渲染。但是不使用这个属性又会导致页面不流畅,所以我当前的解决方法是使用transfrom模拟滚动的插件,不需要-webkit-overflow-scrolling:touch属性,但是缺点是性能问题大,有卡帧现象;
-webkit-overflow-scrolling:touch 是这个属性问题,我的解决办法是去掉,然后用body自带的滚动条