解決mac iOS 上拉 下拉出現白色空白、白邊

表現

pc端：mac鼠標滾動或觸屏滾動時，頭部、底部會多出一塊白色區域

移動端： 手指按住屏幕下拉，屏幕頂部會多出一塊白色區域。手指按住屏幕上拉，底部多出一塊白色區域。

產生原因

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

解決方案

監聽事件禁止滑動

由此我們找到解決方案，通過監聽 touchmove，讓需要滑動的地方滑動，不需要滑動的地方禁止滑動。

值得注意的是我們要過濾掉具有滾動容器的元素。

vue中的解決方案如下

  created () { document.body.addEventListener('touchmove', (e) => { if (e._isScroller) return; e.preventDefault() }, { passive: false }) }, 

 

容器添加樣式 overflow: hidden;

html,body { height: 100%; overflow: hidden; } #app { height: 100%; overflow-y: auto; overflow-x: hidden; }