滑動卡頓效果
安卓手機打開微信瀏覽網頁,Chrome模擬手機瀏覽網頁,都出現的問題滑動卡頓!
修改代碼點:
1、 <style type="text/css">
* { touch-action: pan-y; }
</style>
style加上這個
2、<script>
window.PointerEvent = undefined;
document.addEventListener('touchmove', function (e) {
e.preventDefault();
}, false);
</script>
script加上這兩句
3、tabContentScroll = new IScroll("#tabContentWrapper", {
tap: true,
probeType: 2,
deceleration: 0.001,
vScrollbar: false
});
初始化IScroll的時候,加上vScrollbar: false,最關鍵這句,不加這句,完成其他幾點只可以改好Chorme的問題,安卓的問題解決不了!!!
4、iScroll.js 的js文件,找到297/298/299行,將這三個參數按下圖修改
disablePointer:true,
disableTouch:false,
disableMouse:true,
這一點可以參考這個鏈接 https://github.com/cubiq/iscroll/issues/1100 是官方解釋這樣修改的
不要問為什么,反正就是需要這樣設置參數,這個問題我搜索了n多才找出來這堆需要修改的地方,網上的解答大多比較舊,都是個其中一個一個參數,但是我用的是iScroll v5.2.0 ,真的缺了一個參數都不行!
解決后的效果圖