背景：最近在做一個H5簽到領紅包活動，頁面各種彈層顯示，產品要求彈層半透明背景下主頁面禁止滑動，網上找各種方法，最終確定實現該需求的以下幾種方案。
方案一：
打開蒙層時，給 body 添加樣式：overflow:hidden; height: 100%; 關閉蒙層時，移除樣式。
缺點：兼容性不好，適用於 pc。部分安卓機型以及 safari 中，無法無法阻止底部頁面滾動。
方案二:
利用移動端的 touch 事件，來阻止默認行爲。
// node爲蒙層容器dom節點
node.addEventListener('touchstart',e => {
e.preventDefault()
}, false)
缺點：假如蒙層內元素綁定有事件，那麼事件失效。
方案三:
將頁面固定在視窗（即 position: fixed），這樣它就無法滾動了，當蒙層關閉時再釋放。（將頁面固定視窗後，內容會回頭最頂端，需要記錄並同步top 值）
let bodyEl =document.body;
let top = 0;
function stopBodyScroll (isFixed) {
if (isFixed){
top =window.scrollY;
bodyEl.style.position= 'fixed';
bodyEl.style.top= -top + 'px';
} else {
bodyEl.style.position= '';
bodyEl.style.top= '';
window.scrollTo(0,top); // 回到原先的top
}
}
調用stopBodyScroll方法即可阻止（ stopBodyScroll(1) ）或釋放（ stopBodyScroll(0) ）頁面滑動；
缺點：iphoneX蒙層安全區域覆蓋不上
博主最終選擇了方案三，但由於iphoneX適配問題未能解決，經與產品溝通，最終選擇適配iphoneX而捨棄最初需求。哪位高手有完美方案能同時解決兩個問題，歡迎指教。