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

[/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]