公司最近在做微信端的商城谜酒，是嵌入公眾號(hào)的那種叹俏，需求 => 原型 => UI, ok 開工。
主流程通了之后僻族，測(cè)試開始入場(chǎng)粘驰，瘋狂提bug，也還好述么，大多都是聯(lián)調(diào)接口的問題蝌数，整整改改都還算順利。
接下來就是樣式問題了度秘，ok多不廢話顶伞，進(jìn)入主題。
解決問題剑梳。
網(wǎng)上找了一圈大多都是;
overflow: hidden
頁面有彈出層時(shí)將overflow: hidden樣式添加到 html 上唆貌，禁用 html 和 body 的滾動(dòng)條，但是這個(gè)方案移動(dòng)端根本無用Ｗ杌摹Ｄ幼丁！侨赡！蓖租，pc端也有兩個(gè)缺點(diǎn)；
1.由于 html 和 body的滾動(dòng)條都被禁用羊壹，彈出層后頁面的滾動(dòng)位置會(huì)丟失蓖宦，需要用 js 來還原。
2.頁面的背景還是能夠有滾的動(dòng)的效果油猫。
方案二：touchmove + preventDefault
modal.addEventListener('touchmove', function(e) {
????e.preventDefault();
}, false);?
如果是vue項(xiàng)目在彈層最外層父容器添加屬性：
@touchmove.prevent
次方案適用于你的彈層內(nèi)部不需要滾動(dòng)稠茂。
終極方案： position: fixed
如果只是加fixed，滾動(dòng)條的位置同樣會(huì)丟失。?
所以如果需要保持滾動(dòng)條的位置需要用 js 保存滾動(dòng)條位置關(guān)閉的時(shí)候還原滾動(dòng)位置睬关。
<script type="text/javascript">
//解決遮罩層滾動(dòng)穿透問題诱担，分別在遮罩層彈出后和關(guān)閉前調(diào)用 const ModalHelper = ( (bodyCls) =>{
let scrollTop;
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);
????// scrollTop lost after set position:fixed, restore it back. ????document.scrollingElement.scrollTop = scrollTop;
}
};
})('dialog-open');
</script>
在需要執(zhí)行的頁面；
彈窗調(diào)用ModalHelper.afterOpen()电爹；?
關(guān)閉彈窗調(diào)用ModalHelper.beforeClose()蔫仙；
因?yàn)闉g覽器獲取和設(shè)置?scrollTop?存在兼容性，為了簡(jiǎn)化上面的示例丐箩，我直接使用了?document.scrollingElement?這個(gè)新標(biāo)準(zhǔn)?摇邦，對(duì)于不支持的瀏覽器可用如下?polyfill document.scrollingElement.js?。
