問題描述：移動端當(dāng)有fixed遮罩背景和彈出層時柠衍，在屏幕上滑動能夠滑動背景下面的內(nèi)容畔濒，就是所謂的滾動穿透問題剩晴。
解決方案：
body.modal-open{
position:fixed;
width:100%;
}
如果只用上面的css，滾動條的位置同樣會丟失所以如果需要保持滾動條的位置需要用js保存滾動條位置關(guān)閉的時候還原滾動位置侵状。
/**
* 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');
彈層顯示時調(diào)用 ModalHelper.afterOpen();
彈層隱藏時調(diào)用 ModalHelper.beforeClose();
至此滾動穿透就解決了赞弥。
