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

html{
    overflow:hidden;
}

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

解决方案：

html{
    overflow:hidden;
    position:fixed;
}

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

html{
    overflow:auto;
    position:static;
}

Demo

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

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

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;
    }

JS(使用前记得引入jQuery)

  $('.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();//移除
    });

Demo