解决overflow:hidden在IOS移动端无效的问题

2016-02-19阅读(19178)评论(7)牵着狗狗看MM

苏州实时公交查询

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

[css]html{
overflow:hidden;
}
[/css]

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

解决方案:

[css]html{
overflow:hidden;
position:fixed;
}
[/css]

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

[css]html{
overflow:auto;
position:static;
}
[/css]

Demo

================我是分割线============================

有同学反映说以上解决方案,会存在“关闭弹窗后,滚动条会返回到页面顶部”的问题,下面给出另外一种解决方案。
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]

Demo

赞(0) 打赏
转载请注明来源:Web前端(W3Cways.com) - Web前端学习之路 » 解决overflow:hidden在IOS移动端无效的问题
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏