弹出遮罩层禁用滚动条

弹出遮罩层禁用滚动条

我遇到的问题的点击打开弹窗的， 弹出弹窗，遮罩层覆盖视口，但是下面一层的滚动条依然可以滚动，找些了相关的解决方法，大致可以分为重写滚动条的，改变body为绝对定位的，还有就是微信小程序用方法解决的，和用ui组件解决的，

• 重写滚动条的话相对这个需求有点复杂化了 有具体滚动条的话可以写一下
• 把body改为fixed定位的话可行是可行，但是会出现弹窗后回到顶部的问题，关闭弹窗后在改变定位的话，也停留在最顶部，
• 微信小程序的是用catchtouchmove='nomove’方法去解决的

解决方法

在找寻无过后 果断的自行测试起来了， 我的认知了滚动条在body身上，拿到body直接在打开函数里改动body的overflow, 测试成功

代码实例

	<div @click="openDialog">点击打开对话框</div>
    <div class="dialogModel" v-show='flag'>
        <div class="dialog">
            <div class="main">
                <div class="header"><h2>提示</h2><span></span><span></span></div>
                <div class="content">这是一段信息</div>
                <div class="footer">
                    <button class="cancel" @click="cancelHandel">取消</button>
                    <button class="confirm">确定</button>
                </div>
            </div>
        </div>
    </div>

• 效果图
  
  滚动条隐藏了，位置不会发生改变，关闭后滚动条显示，位置还在原来的位置上

唯一的缺陷就弹窗后隐藏了滚动条