解决iOS 上拉边界下拉出现白色空白

表现

手指按住屏幕下拉,屏幕顶部会多出一块白色区域。手指按住屏幕上拉,底部多出一块白色区域。

产生原因

在 iOS 中,手指按住屏幕上下拖动,会触发 touchmove 事件。这个事件触发的对象是整个 webview 容器,容器自然会被拖动,剩下的部分会成空白。

解决方案

监听事件禁止滑动

由此我们找到解决方案,通过监听 touchmove,让需要滑动的地方滑动,不需要滑动的地方禁止滑动。

值得注意的是我们要过滤掉具有滚动容器的元素。

vue中的解决方案如下

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

添加样式

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

保留需要滚动的区域

<template>
  <div id="app" @touchmove="handleTouch">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view/>
  </div>
</template>

<script>
export default {
  methods: {
    handleTouch (e) {
      e._isScroller = true
    }
  }
}
</script>
已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 技术工厂 设计师:CSDN官方博客 返回首页