假设页面上有个弹出窗，弹出窗出现后，只想让用户的视觉锁定在弹出窗上，正常我们会想到用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