mescroll.js下拉重新整理使用時應該注意的問題(卡頓情況,有時候會拉不動)
在iOS的微信,QQ,Safari等瀏覽器, 列表頂部下拉和底部上拉露出瀏覽器灰色背景, 卡頓2秒 ?
這個問題只存在 iOS 瀏覽器; android,PC是正常的; 原因是 iOS 自身的回彈效果導致的, 解決方法如下:
1. mescroll.min.css 和 mescroll.min.js 更新到1.3.0 版本 (所有版本都向下相容,放心升級, 可通過輸出mescroll.version檢查是否升級成功)
2. 配置 up 的 isBounce 為 false, 禁止ios的回彈效果即可
注意: 配置 up 的 isBounce 為 false 之後, 會禁止window的touchmove 事件,從而阻止 iOS 的回彈效果.
此時除了 mescroll的div 可以滑動,其他的區域勻無法滑動;
如果你希望 mescroll之外的某個div 可以滑動,則可為這個div加入mescroll-touch的樣式即可;
比如你希望頂部導航選單 class="nav-top"的div 可接收touchmove事件, 則class="nav-top mescroll-touch"
如果新增mescroll-touch-x 則可水平滑動 ; 如果新增mescroll-touch-y 則可上下滑動
提示1: body為滾動區域,不支援配置isBounce,所以上下拉仍會露出瀏覽器灰色背景,但不會卡頓2秒.
提示2: 在1.2.5版本是通過巢狀mescroll-bounce的div解決,過於複雜且未徹底修復; 升級到1.3.0版本之後這個div將棄用,您可刪去
提示3: 您可以通過呼叫mescroll.setBounce(true)允許iOS回彈,相當於配置up的isBounce為true
提示4: 您可以通過呼叫mescroll.setBounce(false)阻止iOS回彈,相當於配置up的isBounce為false
提示5: 您還有其他問題 建議看看