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