彈窗是一種常見的交互方式，而蒙層則是彈窗必不可少的元素，用於隔斷頁面與彈窗區塊，暫時阻斷頁面的交互。但是，我們會發現，當彈出遮罩層后，底層body的內容也是可以滾動，顯然這不是我們想要的效果，而這個問題就是小萌最近開發項目時遇到的問題。
一個小程序的項目，是用MPVUE(一個使用 Vue.js 開發小程序的前端框架)做的。其中有做一個詳情頁面領取優惠券的功能。點擊領取按鈕，優惠券列表從底部滑出，有一個半透明的遮罩層，然后列表這塊是可以滾動的，一切都沒有問題，但是當拖動了下底層頁面，發現底層body的內容也是可以滾動的，於是參考其他小程序如：京東、小黃車的小程序，他們的也是有這個問題的，但是吧，產品需求是不要底層這部分的滾動的，而且用戶的一般習慣也是這樣的，只有改了
嘗試方法一：
當蒙層顯示時，為了符合各種機型的“解析方式”，給HTML和body都添加樣式：
body{
height: 100%;
overflow: hidden;
}
蒙層消失時，移除以上樣式。
你以為就這么簡單的解決這個問題了嘛？如果是，只能說是你太天真了，這個方法兼容性很不好，適用於pc，然而移動端就尷尬了，在手機上並沒有什么卵用。該怎么滾還是怎么滾……壓根不受你所寫代碼的任何限制，你說氣人不？
嘗試方法二：
既然我們使用vue的語法來寫代碼的，那不如我們用vue的方式來解決下這個問題。vue提供的 @touchmove.prevent 方法可以用來阻止滑動，有童鞋說這個方法可以完美解決這個問題，然后我就興沖沖的把這個方法添加到我的頁面當中。
當我滿懷期待以為問題就這樣迎刃而解的時候，我又發現了一個新的問題，就是這個方法對其內的子div的滑動事件也禁止掉了，這樣會導致蒙層部分也是無法滑動的。如果沒有蒙層部分的滑動需求，用 @touchmove.prevent 實現是一個很好的方法，但是我有這個需求呀，蒼了個天┌╏ º □ º ╏┐
這個方法也並沒有童鞋說的那么完美嘛……
嘗試方法三：
解決這個問題的晚上在公司加班，改各種bug，因為第二天要上線一部分功能。然后小呆放心不下，怕我下班太晚，就在公司這里的休息區等我，然后我給小呆送吃的時候就問了問小呆，小呆說這個問題你直接用定位解決吧，最靠譜的，其他的有些方法，安卓機會坑死你的……
然后我就想，用定位也是一個辦法，然后就用定位試了試，當點擊顯示蒙層時，為body添加樣式：
1 body{ 2 position:fixed; 3 top:0; 4 height: 100%; 5 overflow: hidden; 6 }
在關閉彈出層時，去掉這段樣式就可以了。
哎，你還別說，這個方法真的有效，底層的內容不會滾動了。問題解決了，然后就是還有一個細節要考慮，就是將頁面定位后，內容會回到頭部最頂端，如有需要，這里我們需要記錄一下，當取消蒙層時同步top值。