微信h5ios手机vue返回上一个页面会遮挡白屏问题

问题:

我们在页面高度超过一屏的时候,把页面滚动到最下面然后点击回退,在进到这个页面就会出现遮挡白屏,刷新或者滑动可以恢复

原因:

在ios机器上使用webview开发Vue项目时候,go history(-1), 无法将body的高度拉掉,使得遮住,刷新或者滑动可以恢复

解决方案实现原理:

html,body都是100%,#app撑起了父元素的告诉,但是浏览器默认的滚动scroll并不是#app,而是body,某些因素,造成返回history 后,无法复原,为此,我们将#app 进行了绝对定位,并让它重新成为 scroll 的对象,从而解决问题

代码:

```

html, body {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

  position: relative;

}

#app {

  width: 100%;

  height: 100%;

  background: #fff;

  overflow: scroll;

  -webkit-overflow-scrolling: touch;

  position: absolute;

  left:0;

  top:0;

}

```

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,687评论 1 92
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 28,086评论 1 45
  • 1. tab列表折叠效果 html: 能源系统事业部 岗位名称: 工作地点 岗位名...
    lilyping阅读 5,889评论 0 1
  • 找到fullcalendar.js, 找到代码为 isRTL:false,这句话 输入以下几句 monthName...
    迷你小小白阅读 5,645评论 0 1
  • 自己去尝试,自己去选择吧,先尝试,再选择,认准方向后,作死地撑住,边撑边掌握平衡。 不要怕,大胆迈出第一步就好,没...
    周洲的日常阅读 1,241评论 0 0