ios系統在h5頁面下拉上拉會帶動整個webview 出現空白

產生原因

在 iOS 中，手指按住屏幕上下拖動，會觸發 touchmove 事件。這個事件觸發的對象是整個 webview 容器，容器自然會被拖動，剩下的部分會成空白。

在 W3C 文檔中說

touchmove 事件的速度是可以實現定義的，取決於硬件性能和其他實現細節

preventDefault 方法，阻止同一觸點上所有默認行為，比如滾動。

解決方案

監聽事件禁止滑動，通過監聽 touchmove，讓需要滑動的地方滑動，不需要滑動的地方禁止滑動。

//這個ios13以上沒有效果
document.body.addEventListener('touchmove', function(evt) { if(!evt._isScroller) { evt.preventDefault(); } }); //這個會完全禁止touchmove 導致內部無法滾動。
document.body.addEventListener('touchmove', function (e) { if(e._isScroller) return; //過濾掉具有滾動容器的元素。
 e.preventDefault(); }, {passive: false}); //passive 參數不能省略