解决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; }