vue 移动端 返回上一页 空白

vue移动端项目中,部分机型点击返回上一页的时候,会出现空白,点击或者滑动,页面回复正常。这是由于返回后无法将 body 的高度拉开,使得遮住,触发轻点击,方可消除遮罩针对此问题。

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

尝试了很多次,最终解决方法如下

html,body{
  height: 100%;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
#app {
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
}

 

posted @ 2018-11-22 18:01  晨の风  阅读(2769)  评论(0编辑  收藏  举报