成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

betacat / 2169人閱讀

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

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

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

嘗試方法一：

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

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

　

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

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

嘗試方法二：

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

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

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

嘗試方法三：

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

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

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

在關(guān)閉彈出層時，去掉這段樣式就可以了。

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/1833.html

相關(guān)文章

  • 兼容移動端 js彈出框?qū)崿F(xiàn)微信禁止h5禁止網(wǎng)頁下拉，滾動穿透，禁止微信內(nèi)置瀏覽器下拉網(wǎng)頁

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

    robin 評論0 收藏0

  • 兼容移動端 js彈出框?qū)崿F(xiàn)微信禁止h5禁止網(wǎng)頁下拉，滾動穿透，禁止微信內(nèi)置瀏覽器下拉網(wǎng)頁

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

    inapt 評論0 收藏0

  • 兼容移動端 js彈出框?qū)崿F(xiàn)微信禁止h5禁止網(wǎng)頁下拉，滾動穿透，禁止微信內(nèi)置瀏覽器下拉網(wǎng)頁

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

    高璐 評論0 收藏0

  • 移動端下彈框禁止背景滑動

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

    pf_miles 評論0 收藏0

  • 移動端下彈框禁止背景滑動

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

    baukh789 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<