问题描述：移动端当有fixed遮罩背景和弹出层时，在屏幕上滑动能够滑动背景下面的内容，就是所谓的滚动穿透问题。
解决方案：
body.modal-open{
position:fixed;
width:100%;
}
如果只用上面的css，滚动条的位置同样会丢失所以如果需要保持滚动条的位置需要用js保存滚动条位置关闭的时候还原滚动位置。
/**
* ModalHelper helpers resolve the modal scrolling issue on mobile devices
* https://github.com/twbs/bootstrap/issues/15852
* requires document.scrollingElement polyfill https://github.com/yangg/scrolling-element
*/
varModalHelper = (function(bodyCls){
varscrollTop;
return{
afterOpen:function(){
scrollTop =document.scrollingElement.scrollTop;
document.body.classList.add(bodyCls);
document.body.style.top = -scrollTop +'px';
},
beforeClose:function(){
document.body.classList.remove(bodyCls);
document.body.removeAttribute("style");
// scrollTop lost after set position:fixed, restore it back.
document.scrollingElement.scrollTop = scrollTop;
}
};
})('modal-open');
弹层显示时调用 ModalHelper.afterOpen();
弹层隐藏时调用 ModalHelper.beforeClose();
至此滚动穿透就解决了。
