由于年后的各種問題,博客的更新中斷了,現在算是穩定了下來,準備把自己暫時“丟掉”的博客再撿起來,不管怎樣,開始都不算太晚。廢話就不多說了,下面就進入到正題吧。

彈窗是一種常見的交互方式,而蒙層則是彈窗必不可少的元素,用于隔斷頁面與彈窗區塊,暫時阻斷頁面的交互。但是,我們會發現,當彈出遮罩層后,底層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添加樣式:

body{
    position:fixed;
    top:0;
    height: 100%;
    overflow: hidden;
}

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

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

文章到這里就沒有了,回歸后的第一篇文章,“簡陋”了點,希望對需要的朋友有幫助哦,:??(?′?`)??: 學習使我進步

拜拜┏(^0^)┛