vue遮罩層如何阻止滾動

Posted on by

vue遮罩層阻止滾動

給vue用fixed定位加一個遮罩層，滾動鼠標滾輪發現下面一層的頁面隨之滾動，那麼如何阻止下層頁面滾動？

我這裡給遮罩層加一個取消鼠標滾輪默認行為的事件

<div class="popup" @mousewheel="mousewheel">
   <div class="cen">彈框內容</div>
</div>
mousewheel(e){
  e.preventDefault();
}

或者使用vue中提供 @touchmove.prevent 方法可以完美解決這個問題

<div class="popup" @touchmove.prevent v-if="show">
</div>

這會造成一個問題雖然遮罩層滾動問題解決瞭，但是彈框中的內容要是滾動會間接性的影響到遮罩層的滾動，那麼如何解決？

網上查瞭很多資料，試瞭一下沒有效果，我這裡的解決方案是點擊詳情的時候彈出遮罩層，彈出的時候給body設置overflow:hidden當點擊關閉遮罩層時，設置overflow:null

代碼如下：

<!-- 手寫彈框 -->
    // 遮罩層
    <div class="popup" @touchmove.prevent v-if="show"></div>
    
    // 彈框內容 (已設置overflow:scroll超出滾動)
    <div class="cen" v-if="show">
        <ul>
            <li v-for="(e,i) in dts" :key="i">
                <img :src="e" alt="">
            </li>
        </ul>
    </div>
    // 關閉按鈕
    <div class="gb" @click="gb()" v-if="show">
        <svg t="1604306237286" class="icon ic" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2388" width="48" height="48"><path d="M660.518 682.87c-5.903 0-11.804-2.2-16.306-6.702L342.366 374.372c-9.003-9.003-9.003-23.608 0-32.61s23.608-9.002 32.61 0l301.847 301.796c9.002 9.003 9.002 23.607 0 32.61-4.501 4.5-10.404 6.703-16.305 6.703z" p-id="2389" fill="#ffffff"></path><path d="M358.67 682.87c-5.901 0-11.803-2.2-16.304-6.702-9.003-9.003-9.003-23.607 0-32.61l301.846-301.796c9.003-9.002 23.607-9.002 32.61 0 9.002 9.002 9.002 23.607 0 32.61L374.977 676.168c-4.503 4.5-10.404 6.703-16.307 6.703z" p-id="2390" fill="#ffffff"></path><path d="M509.62 956.157c-246.579 0-447.244-200.614-447.244-447.242 0-246.58 200.664-447.218 447.243-447.218 246.58 0 447.243 200.638 447.243 447.218 0 246.628-200.664 447.242-447.243 447.242z m0-848.346c-221.172 0-401.13 179.933-401.13 401.105 0 221.169 179.958 401.128 401.13 401.128 221.17 0 401.127-179.959 401.127-401.128 0-221.172-179.957-401.105-401.128-401.105z" p-id="2391" fill="#ffffff"></path></svg>
    </div>
// 這是列表數據點擊時
details(e)
{
   this.dts=e
   this.show=!this.show
   var body = document.getElementsByTagName('body')[0]
   console.log(body)
   body.style.overflow='hidden'
}, 
// 這是點擊關閉按鈕時
gb()
{
   this.show=!this.show
   var body = document.getElementsByTagName('body')[0]
   console.log(body)
   body.style.overflow=null
}

vue解決遮罩層滾動方法

vue遮罩層阻止默認滾動事件

在寫移動端頁面的時候,彈出遮罩層後，我們仍然可以滾動頁面。 

vue中提供 @touchmove.prevent 方法可以完美解決這個問題

<div class="dialog" @touchmove.prevent ></div>

或者給不需要滾動的部分加上overflow:hidden屬性解決 

以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。 

推薦閱讀：