客戶需求:禁止微信內的H5頁面上下拖動;微信
解決方案:網絡
網上的答案几乎都是阻止默認事件,即:測試
1 document.body.addEventListener('touchmove' , function(e){ 2 e.preventDefault(); 3 });
可是使用這個方法還存在必定的問題:spa
bug1:有時生效有時失效;code
緣由:通過不間斷的實踐測試,發現有多是網絡加載的問題,在用戶拖動頁面的時候上面的功能代碼還沒加載出來,因此沒有生效。blog
解決方法:監聽頁面資源加載,等頁面內全部資源加載完畢後再將頁面顯示出來。代碼以下:事件
1 document.onreadystatechange = function () { 2 if (document.readyState == "complete") { 3 document.body.style.display = "block"; 4 } else { 5 document.body.style.display = "none"; 6 }; 7 };
bug2:華爲P六、P9,魅族等手機上無效;資源
緣由:有多是安卓版本較低,存在兼容問題;(測試機有限,目前測的是安卓4.4上無效)io
解決方法:暫未找到合適的解決方案,若有大神解決此類問題,歡迎留言指導~event
謝謝~