zoukankan      html  css  js  c++  java
  • 解决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;
    }
  • 相关阅读:
    BZOJ1251: 序列终结者
    BZOJ1014 [JSOI2008]火星人prefix
    NOI模拟赛Day6
    NOI模拟赛Day5
    BZOJ2329: [HNOI2011]括号修复
    NOI模拟赛Day4
    状压dp题目总结
    BZOJ2097[Usaco2010 Dec] 奶牛健美操
    BZOJ4027: [HEOI2015]兔子与樱花 贪心
    BZOJ1443: [JSOI2009]游戏Game
  • 原文地址:https://www.cnblogs.com/yzhihao/p/14235685.html
Copyright © 2011-2022 走看看