H5页面在ios下部分兼容问题

1.上拉下拉出现白色背景解决方案

页面设置百分百高度，并设置overflow-y: scroll;

.wrap{
    width:100%;
    height:100%;
    overflow-y: scroll;
}
复制代码

2.键盘弹出视图上移，取消后底部有白块

设置页面为固定定位 display:fixed;

.wrap{
    width:100%;
    height:100%;
    overflow-y: scroll;
    display:fixed;
    top:0;
    left:0;
}
复制代码

但是如果页面中有点击按钮之类的会导致事件失效,原因是位置发生变化 解决方案: 在input 等按钮失去焦点后 执行 window.scroll(0,0) 使页面实际位置回到先前位置 使用vue代码实现

  HTML
  
  <input  @blur.prevent="getBlur()"></input>
  
  JS:
     getBlur(){
         window.scroll(0, 0);
      }
复制代码

3.modal 弹出层后禁止底层滚动

最外层设置百分百,在固定的高度中进行滚动

<div class="wrap">
    <div class="box">
    XXX
    ...
    ...
    XXX
    </div>
</div>
.wrap{
    width:100%;
    height:100%;
    overflow:hidden;
}
.box{
    height:1000%;
    overflow:scroll;
}
复制代码

滚动的部分可以用相关插件代替