移动端在有弹出层时如何禁止底层的滚动

众所周知，移动端当有 fixed 遮罩背景和弹出层时，在屏幕上滑动能够滑动背景下面的内容，这就是臭名昭著的滚动穿透问题

解决方案1

//css
 body.modal-open {
    overflow: hidden;
    height: 100%;
}

页面弹出层上将 .modal-open 添加到 html 上，禁用 html 和 body 的滚动条
但是这个方案有两个缺点：

• 由于 html 和 body的滚动条都被禁用，弹出层后页面的滚动位置会丢失，需要用 js 来还原
• 页面的背景还是能够有滚的动的效果

//js
modal.addEventListener('touchmove', function(e) {
  e.preventDefault();
},

• 这样用 js 阻止滚动后看起来效果不错了，但是也有一个缺点：弹出层里不能有其它需要滚动的内容（如大段文字需要固定高度，显示滚动条也会被阻止）

解决方案2(建议使用)

//css
body.modal-open {
    position: fixed;
    width: 100%;
}

如果只是上面的 css，滚动条的位置同样会丢失，所以如果需要保持滚动条的位置需要用 js 保存滚动条位置关闭的时候还原滚动位置

//弹出层打开的时候
function getScrollTop() {
        var scrollTop = 0;
        if(document.documentElement && document.documentElement.scrollTop) {
            scrollTop = document.documentElement.scrollTop;
        } else if(document.body) {
            scrollTop = document.body.scrollTop;
        }
        return scrollTop;
    }
var scrollTop=getScrollTop(); //设置成全局的
document.body.className="modal-open";
document.body.style.top = -scrollTop + 'px';

//弹出层关闭的时候
document.body.className=" ";
document.scrollingElement.scrollTop = scrollTop;

• tips
  如何让一个div可以滚动(给div一个固定高度，然后设置overflow-y:auto;)
  引用地址