SoFunction
Updated on 2025-04-03

How vue mask layer prevents scrolling

vue mask layer prevents scrolling

Add a mask layer to vue with fixed positioning, scroll the mouse wheel and find that the page of the following layer scrolls accordingly. So how to prevent the lower layer of page from scrolling?

I'll add an event to the mask layer to cancel the default behavior of the mouse wheel.

<div class="popup" @mousewheel="mousewheel">
   <div class="cen">Pop-up content</div>
</div>
mousewheel(e){
  ();
}

Or use the @ method provided in vue to perfectly solve this problem

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

This will cause a problem. Although the problem of scrolling the mask layer is solved, if the scrolling of the content in the pop-up box will indirectly affect the scrolling of the mask layer, how to solve it?

I checked a lot of information online and tried it but it didn't work. My solution here is to pop up the mask layer when clicking on the details. When popping up, set overflow:hidden for the body. When clicking to close the mask layer, set overflow:null

The code is as follows:

&lt;!-- Handwriting pop-up frame --&gt;
    // Mask layer    &lt;div class="popup" @ v-if="show"&gt;&lt;/div&gt;
    
    // pop-up box content (overflow:scroll has been set to exceed scrolling)    &lt;div class="cen" v-if="show"&gt;
        &lt;ul&gt;
            &lt;li v-for="(e,i) in dts" :key="i"&gt;
                &lt;img :src="e" alt=""&gt;
            &lt;/li&gt;
        &lt;/ul&gt;
    &lt;/div&gt;
    // Close button    &lt;div class="gb" @click="gb()" v-if="show"&gt;
        &lt;svg t="1604306237286" class="icon ic" viewBox="0 0 1024 1024" version="1.1" xmlns="http:///2000/svg" p- width="48" height="48"&gt;&lt;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- fill="#ffffff"&gt;&lt;/path&gt;&lt;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- fill="#ffffff"&gt;&lt;/path&gt;&lt;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- fill="#ffffff"&gt;&lt;/path&gt;&lt;/svg&gt;
    &lt;/div&gt;
// This is when the list data is clickeddetails(e)
{
   =e
   =!
   var body = ('body')[0]
   (body)
   ='hidden'
}, 
// This is when the close button is clickedgb()
{
   =!
   var body = ('body')[0]
   (body)
   =null
}

vue solves the method of scrolling mask layer

vue mask layer blocks default scrolling events

When writing a mobile page, after the mask layer pops up, we can still scroll the page.

The @ method provided in vue can perfectly solve this problem

<div class="dialog" @ ></div>

Or add the overflow:hidden attribute to the part that does not need to be scrolled.

The above is personal experience. I hope you can give you a reference and I hope you can support me more.