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的的