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的處理造成的;
以上的問題,如果有遇到并且解決過的,請幫忙了。
問題解答
回答1:這種情況應該是因為使用了-webkit-overflow-scrolling:touch屬性導致的,webview會為添加了此屬性的元素添加一層進行渲染。但是不使用這個屬性又會導致頁面不流暢,所以我當前的解決方法是使用transfrom模擬滾動的插件,不需要-webkit-overflow-scrolling:touch屬性,但是缺點是性能問題大,有卡幀現象;
回答2:-webkit-overflow-scrolling:touch 是這個屬性問題,我的解決辦法是去掉,然后用body自帶的滾動條
相關文章:
1. android - 安卓做前端,PHP做后臺服務器 有什么需要注意的?2. docker不顯示端口映射呢?3. mysql - 我用SQL語句 更新 行的時候,發現全部 中文都被清空了,請問怎么解決?4. python - 子進程執行完成為僵尸進程,怎么解決5. python - xpath提取網頁路徑沒問題,但是缺失內容?6. javascript - 求教各位,本地HTML頁面怎么在DIV中嵌套服務器上的頁面內容?不用iframe。7. python-mysql Commands out of sync8. java中返回一個對象,和輸出對像的值,意義在哪兒9. javascript - 給某個類添加一個偽類,這個類有click事件,現在我點擊偽類也觸發了click事件10. docker images顯示的鏡像過多,狗眼被亮瞎了,怎么辦?
