弹窗是一种常见的交互方式，而蒙层则是弹窗必不可少的元素，用于隔断页面与弹窗区块，暂时阻断页面的交互。但是，我们会发现，当弹出遮罩层后，底层body的内容也是可以滚动，显然这不是我们想要的效果，这个是最近做项目频繁出现的一个问题，对于这个问题尝试了几种解决方案，皆存在弊端。
方法一：
当触发浮层的时候对body加css样式
body: {
height: 100%;
overflow: hidden;
}
使用这个方法测试后发现，在pc端支持良好，在移动端就很尴尬了，部分Android手机支持，iOS手机完全不支持
方法二：
我们写的这个项目正好是个Vue项目，可以用vue提供的 @touchmove.prevent 方法可以用来阻止滑动，当时用了之后感觉良好，结果测试来给报bug了，说是遮罩页上的其他需要滑动的元素都无法滑动了，啊尴尬了，这个方式禁掉了所有的滑动时间，看来对于我的需求来说依然用不得了...
方法三：
这个方法使用定位的原理，也是目前项目使用的方式，测试后移动端支持良好，靠谱！！！
需要注意的细节，就是将页面定位后，内容会回到头部最顶端，如有需要，这里我们需要记录一下，当取消蒙层时同步top值。
在vue项目使用，封装了个简单的
+在vue项目下通过自定义指令封装了个简单的指令
'use strict';
var scrollTop = 0;
function install(Vue) {
Vue.directive('banscroll', {
bind(el, binding, vnode, oldVnode) {
scrollTop = window.scrollY
document.body.style.position = 'fixed';
document.body.style.top = `-${scrollTop}px`;
document.body.style.left = 0;
document.body.style.right = 0;
document.body.style.overflow = 'hidden';
},
unbind(el) {
document.body.style.position = '';
document.body.style.top = 0;
document.body.style.overflow = 'auto';
window.scrollTo(0, scrollTop);
}
})
}
export default install;
