IOS不支持overflow: hidden;

2018/06/06 16:37
阅读数 79

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

展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部