Ios下 用钉钉打开vue开发的h5页面 点击返回按钮,页面白色被遮住一部分

参考文章1 , 参考文章2

说明: A页面 --> B页面 --> C页面 --> 点击app的返回按钮 --> 页面白色被遮住一部分

分析:在ios机器上使用webview开发Vue项目时候,go history(-1), 无法将body的高度拉掉,使得页面被遮住,触发点击,方可消除遮罩

解决方案实现原理:html,body都是100%,#app撑起了父元素的高度,但是浏览器默认的滚动scroll并不是#app,而是body,某些因素造成返回history 后,无法复原(ios 的锅),为此,我们将#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;  
} 

 

 

posted @ 2021-04-09 16:13  Vicky-Rong  阅读(532)  评论(0编辑  收藏  举报