javascript - ios web端滚动页面有粘黏的情况

问题描述

现象：使用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自带的滚动条