IOS不支持overflow: hidden;

IOS不支持overflow: hidden;

假设页面上有个弹出窗，弹出窗出现后，只想让用户的视觉锁定在弹出窗上，正常我们会想到用overflow:hidden这个属性来实现，如下

html{
    overflow:hidden;
}

这样写在PC端上没有任何问题，效果杠杠到，但是在IOS移动端上，弹出窗出现后，依旧可以在背景层部分滑动

解决方案：

html{
    overflow:hidden;
    position:fixed;
}

如果需要关闭弹窗后，滚动条出现，使用如下CSS即可。

html{
    overflow:auto;
    position:static;
}

但是，会存在“关闭弹窗后，滚动条会返回到页面顶部”的问题  !!!!!!!!!!!!!!!!!!!!!!!

 

 

======================================================================

 

点击按钮，显示弹窗：

（按照上面的方法解决，加上overflow:hidden;position:fixed; 虽然滑动的时候，下面的页面不会被滑动，但是页面会滚动到顶部，而不是保持在底部）

最终找到一个方法，就是用scroll-view来代替

　　代码：

//html

<scroll-view style="height:100vh" scroll-y="{{isScroll}}">
  <view style="width:100%;">
    <view style="height:3000rpx;">
      <view>header</view>
      <view style="margin-top:2900rpx;" id="footer">footer</view>
      <button bindtap="button_click">显示弹窗</button>
    </view>
  </view>
  <!--弹窗  -->
  <view class="mask" wx:if="{{showAlert}}" bindtap="closeModal">
    <view class="showModal">
      弹窗
    </view>
  </view>
</scroll-view>

//css

.mask{
  width:100%;
  height:100%;
  position:fixed;
  top:0;
  left:0;
  background:rgba(0,0,0,.7);
}
.showModal{
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:70%;
  height:600rpx;
  background:white;
}

//js

Page({
  /**
   * 页面的初始数据
   */
  data: {
    showAlert:false,
    isScroll: true,
  },
  button_click:function(){
    this.setData({
      showAlert: true,
      isScroll: false
    }) 
  },
  closeModal:function(){
    this.setData({
      showAlert: false,
      isScroll: true
    })
  }
})

 

　　效果图：

 

 

 

 

 

diadia的的