vue遮罩层如何阻止滚动_vue.js_

vue遮罩层阻止滚动

给vue用fixed定位加一个遮罩层，滚动鼠标滚轮发现下面一层的页面随之滚动，那么如何阻止下层页面滚动？

我这里给遮罩层加一个取消鼠标滚轮默认行为的事件

    
弹框内容

mousewheel(e){   e.preventDefault(); }

或者使用vue中提供 @touchmove.prevent 方法可以完美解决这个问题

这会造成一个问题虽然遮罩层滚动问题解决了，但是弹框中的内容要是滚动会间接性的影响到遮罩层的滚动，那么如何解决？

网上查了很多资料，试了一下没有效果，我这里的解决方案是点击详情的时候弹出遮罩层，弹出的时候给body设置overflow:hidden当点击关闭遮罩层时，设置overflow:null

代码如下：

     // 遮罩层     
          // 弹框内容 (已设置overflow:scroll超出滚动)     
         
             
                              
         
     
     // 关闭按钮     
              

 // 这是列表数据点击时 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 方法可以完美解决这个问题

或者给不需要滚动的部分加上overflow:hidden属性解决 

以上为个人经验，希望能给大家一个参考，也希望大家多多支持。 

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！