弹出遮罩层后，如何禁止底层页面的滚动

弹窗是一种常见的交互方式，而蒙层则是弹窗必不可少的元素，用于隔断页面与弹窗区块，暂时阻断页面的交互。但是，我们会发现，当弹出遮罩层后，底层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;