假设页面上有个弹出窗,弹出窗出现后,只想让用户的视觉锁定在弹出窗上,正常我们会想到用overflow:hidden这个属性来实现,如下
[css]html{
overflow:hidden;
}
[/css]
这样写在PC端上没有任何问题,效果杠杠到,但是在IOS移动端上,弹出窗出现后,依旧可以在背景层部分滑动
解决方案:
[css]html{
overflow:hidden;
position:fixed;
}
[/css]
如果需要关闭弹窗后,滚动条出现,使用如下CSS即可。
[css]html{
overflow:auto;
position:static;
}
[/css]
================我是分割线============================
有同学反映说以上解决方案,会存在“关闭弹窗后,滚动条会返回到页面顶部”的问题,下面给出另外一种解决方案。
HTML
[html]<div class="myclass"><p>向下滚动找到弹窗按钮</p><a href="#" class="popup">点我出现弹窗</a></div>
<div class="full-wrap"><a href="javascript:;" class="closebg">关闭弹窗</a> //注意这里href的值必须不能为#,不然点击后会返回顶部
<p>测试
<br>测试
<br>测试
<br>测试
<br>测试
<br>测试
<br>测试
<br>测试
<br>测试
<br>测试
<br>测试
<br>测试
<br>测试
<br>测试
<br>测试
<br>测试
<br>测试
<br>测试
<br>测试
<br>测试
<br>测试
<br>测试
<br>测试
<br>测试
<br>测试
<br>测试
<br>测试
<br></p></div>
<div id="fullbg"></div>
[/html]
CSS
[css]
.myclass {
width: 100%;
height: 2000px;
background: #00baff;
color: #fff;
}
.popup {
margin:1000px 20px 20px;
margin-top: 1000px;
float: left;
display: block;
padding: 20px;
border-radius: 4px;
background: #fff;
color: #00baff;
}
.full-wrap {
display: none;
margin: -200px 0 0 -200px;
width: 400px;
height: 400px;
position: fixed;
left: 50%;
top: 50%;
background: #0789d9;
z-index: 103;
text-align: right;
text-align: left;
overflow: scroll;
}
.closebg {
float: right;
color: #fff;
}
#fullbg {
display: none;
background: rgba(0, 0, 0, 1);
left: 0;
position: fixed;
top: 0;
right: 0;
bottom: 0;
z-index: 102;
}
[/css]
JS(使用前记得引入jQuery)
[js]
$(‘.popup’).on(‘click’, function () {
var position = $(window).scrollTop(); // 保存滚动条位置
$("#fullbg").css({
height: ‘100%’,
width: ‘100%’,
display: "block"
});
$(".full-wrap").css({
display: "block"
});
$(‘html’).css({
overflow: "hidden"
});
$(window).scroll(function (e) {
$(window).scrollTop(position); // 恢复滚动条位置
});
});
$(‘.closebg’).on(‘click’, function () {
$("#fullbg,.full-wrap").hide();
$(‘html’).removeAttr(‘style’);
$(window).off();//移除
});
[/js]