問(wèn)題描述

現(xiàn)象：使用iphone6 plus、iphone7 plus、iphone6s plus，在上拉檢索商品的頁(yè)面，頁(yè)面是每20件商品顯示一頁(yè)，到底后，上拉加載下一頁(yè)的商品數(shù)據(jù)。快速想上滑動(dòng)，當(dāng)滑動(dòng)一定的頁(yè)面數(shù)之后(具體視情況而定)，會(huì)偶爾出現(xiàn)頁(yè)面粘黏，無(wú)法滑動(dòng)的場(chǎng)合。并不是每次都會(huì)出現(xiàn)這種情況。

頁(yè)面是使用react.js構(gòu)造的單頁(yè)面應(yīng)用。

問(wèn)題：現(xiàn)在問(wèn)題的定位點(diǎn)有些不清楚(1)從目前的狀況看，安卓側(cè)是沒(méi)有出現(xiàn)這個(gè)問(wèn)題，只有ios側(cè)會(huì)出現(xiàn)這種問(wèn)題，是否是因?yàn)閕os系統(tǒng)本身會(huì)有這個(gè)粘黏的問(wèn)題；(2)需要翻動(dòng)到一定的頁(yè)面數(shù)才會(huì)出現(xiàn)這種情況，但是并不是很大幾率；(3)滾動(dòng)頁(yè)面dom的構(gòu)成是p+p去做的，并沒(méi)有通過(guò)流行的p + ul + li這種標(biāo)簽構(gòu)造滾動(dòng)頁(yè)面dom，是否用p+p這種方式有隱藏的問(wèn)題；(4)使用react.js去渲染頁(yè)面，是否因?yàn)槔貌划?dāng)造成了這種頁(yè)面粘黏的情況，即javascript的處理造成的；

以上的問(wèn)題，如果有遇到并且解決過(guò)的，請(qǐng)幫忙了。

問(wèn)題解答

這種情況應(yīng)該是因?yàn)槭褂昧?webkit-overflow-scrolling:touch屬性導(dǎo)致的，webview會(huì)為添加了此屬性的元素添加一層進(jìn)行渲染。但是不使用這個(gè)屬性又會(huì)導(dǎo)致頁(yè)面不流暢，所以我當(dāng)前的解決方法是使用transfrom模擬滾動(dòng)的插件，不需要-webkit-overflow-scrolling:touch屬性，但是缺點(diǎn)是性能問(wèn)題大，有卡幀現(xiàn)象；

-webkit-overflow-scrolling:touch 是這個(gè)屬性問(wèn)題，我的解決辦法是去掉，然后用body自帶的滾動(dòng)條