vue遮罩层如何阻止滚动
作者：sslcsq
这篇文章主要介绍了vue遮罩层如何阻止滚动，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
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属性解决
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。