Vue 弹出层时 禁止页面滑动

     

    在做移动端或者pc端的时候我们自定义弹窗发现后面的body比较高会出现滚动条，所以我们在显示弹窗的时候隐藏掉滚动条，但是pc端可以完美的用overflow：hidden，可是移动端呢，安卓可以实现这样的效果，但是到了苹果手机上overflow：hidden行内可能不兼容造成无法隐藏滚动条，不建议在行内使用overflow：hidden,我用了类名样式去实现这样的隐藏，样式不支持可以加一个position：fixed来实现页面不滚动；

stop(){//禁止滑动限制
    var mo=function(e){e.preventDefault();};
    document.getElementsByTagName('body')[0].classList.add("sroll");; //设置为新的
    document.addEventListener("touchmove",mo,false);//禁止页面滑动
},
move(){//取消滑动限制
    var mo=function(e){e.preventDefault();};
    document.getElementsByTagName('body')[0].classList.remove("sroll"); //设置为新的
    document.removeEventListener("touchmove",mo,false);
},

在需要的地方调用

body.sroll{
    overflow: hidden;
    position: fixed;
}