彈出遮罩層后，如何禁止底層頁面的滾動

betacat 發布于2019-04-23 13:24 / 2151人閱讀

摘要：但是，我們會發現，當彈出遮罩層后，底層的內容也是可以滾動，顯然這不是我們想要的效果，而這個問題就是小萌最近開發項目時遇到的問題。

彈窗是一種常見的交互方式，而蒙層則是彈窗必不可少的元素，用于隔斷頁面與彈窗區塊，暫時阻斷頁面的交互。但是，我們會發現，當彈出遮罩層后，底層body的內容也是可以滾動，顯然這不是我們想要的效果，而這個問題就是小萌最近開發項目時遇到的問題。

一個小程序的項目，是用MPVUE(一個使用 Vue.js 開發小程序的前端框架)做的。其中有做一個詳情頁面領取優惠券的功能。點擊領取按鈕，優惠券列表從底部滑出，有一個半透明的遮罩層，然后列表這塊是可以滾動的，一切都沒有問題，但是當拖動了下底層頁面，發現底層body的內容也是可以滾動的，于是參考其他小程序如：京東、小黃車的小程序，他們的也是有這個問題的，但是吧，產品需求是不要底層這部分的滾動的，而且用戶的一般習慣也是這樣的，只有改了

嘗試方法一：

當蒙層顯示時，為了符合各種機型的“解析方式”，給HTML和body都添加樣式：

body{
    height: 100%;
    overflow: hidden;
}

蒙層消失時，移除以上樣式。

你以為就這么簡單的解決這個問題了嘛？如果是，只能說是你太天真了，這個方法兼容性很不好，適用于pc，然而移動端就尷尬了，在手機上并沒有什么卵用。該怎么滾還是怎么滾……壓根不受你所寫代碼的任何限制，你說氣人不？

嘗試方法二：

既然我們使用vue的語法來寫代碼的，那不如我們用vue的方式來解決下這個問題。vue提供的?@touchmove.prevent?方法可以用來阻止滑動，有童鞋說這個方法可以完美解決這個問題，然后我就興沖沖的把這個方法添加到我的頁面當中。

當我滿懷期待以為問題就這樣迎刃而解的時候，我又發現了一個新的問題，就是這個方法對其內的子div的滑動事件也禁止掉了，這樣會導致蒙層部分也是無法滑動的。如果沒有蒙層部分的滑動需求，用 @touchmove.prevent 實現是一個很好的方法，但是我有這個需求呀，蒼了個天┌? o □ o ?┐

這個方法也并沒有童鞋說的那么完美嘛……

嘗試方法三：

解決這個問題的晚上在公司加班，改各種bug，因為第二天要上線一部分功能。然后小呆放心不下，怕我下班太晚，就在公司這里的休息區等我，然后我給小呆送吃的時候就問了問小呆，小呆說這個問題你直接用定位解決吧，最靠譜的，其他的有些方法，安卓機會坑死你的……

然后我就想，用定位也是一個辦法，然后就用定位試了試，當點擊顯示蒙層時，為body添加樣式：

1 body{
2     position:fixed;
3     top:0;
4     height: 100%;
5     overflow: hidden;
6 }

在關閉彈出層時，去掉這段樣式就可以了。

哎，你還別說，這個方法真的有效，底層的內容不會滾動了。問題解決了，然后就是還有一個細節要考慮，就是將頁面定位后，內容會回到頭部最頂端，如有需要，這里我們需要記錄一下，當取消蒙層時同步top值。

GPU云服務器云服務器點擊彈出遮罩層彈出遮罩手機彈出遮罩菜單 js彈出一個遮罩層

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/1833.html

兼容移動端 js彈出框實現微信禁止h5禁止網頁下拉，滾動穿透，禁止微信內置瀏覽器下拉網頁

摘要：彈出層觸發時候頁面設置為高度百分百將不能滾動設置的樣式為取消時候把樣式重置還原為最初彈出層遮罩層灰色區域點擊關閉遮罩層遮罩層阻止冒泡默認事件彈出層禁止頁面彈出框彈出時候市面下拉滾動監聽事件，這樣一來整個頁面將不能滾動所以添加一個判斷你的大盒 //彈出層觸發時候頁面設置為高度百分百將不能滾動設置body html的樣式為overflow: hidden,height:100%//取消時...

robin 2019-08-30 15:56 評論0 收藏0
兼容移動端 js彈出框實現微信禁止h5禁止網頁下拉，滾動穿透，禁止微信內置瀏覽器下拉網頁

摘要：彈出層觸發時候頁面設置為高度百分百將不能滾動設置的樣式為取消時候把樣式重置還原為最初彈出層遮罩層灰色區域點擊關閉遮罩層遮罩層阻止冒泡默認事件彈出層禁止頁面彈出框彈出時候市面下拉滾動監聽事件，這樣一來整個頁面將不能滾動所以添加一個判斷你的大盒 //彈出層觸發時候頁面設置為高度百分百將不能滾動設置body html的樣式為overflow: hidden,height:100%//取消時...

inapt 2019-08-26 13:35 評論0 收藏0
兼容移動端 js彈出框實現微信禁止h5禁止網頁下拉，滾動穿透，禁止微信內置瀏覽器下拉網頁

摘要：彈出層觸發時候頁面設置為高度百分百將不能滾動設置的樣式為取消時候把樣式重置還原為最初彈出層遮罩層灰色區域點擊關閉遮罩層遮罩層阻止冒泡默認事件彈出層禁止頁面彈出框彈出時候市面下拉滾動監聽事件，這樣一來整個頁面將不能滾動所以添加一個判斷你的大盒 //彈出層觸發時候頁面設置為高度百分百將不能滾動設置body html的樣式為overflow: hidden,height:100%//取消時...

高璐 2019-08-02 14:30 評論0 收藏0
移動端下彈框禁止背景滑動

摘要：移動端下彈框禁止背景滑動茴字寫法有很多種，找到最適合的才是好的。移動端下彈框禁止背景滑動茴字寫法有很多種，找到最適合的才是好的。以下下方法在一屛之內是可行的 body;html 設置overflow:hidden .overflow-hidden{ height: 100%; overflow: hidden; } // 彈出時 $(html, body,.pa...

pf_miles 2019-08-29 17:04 評論0 收藏0
移動端下彈框禁止背景滑動

摘要：移動端下彈框禁止背景滑動茴字寫法有很多種，找到最適合的才是好的。移動端下彈框禁止背景滑動茴字寫法有很多種，找到最適合的才是好的。以下下方法在一屛之內是可行的 body;html 設置overflow:hidden .overflow-hidden{ height: 100%; overflow: hidden; } // 彈出時 $(html, body,.pa...

baukh789 2019-08-02 11:50 評論0 收藏0