Vue 弹出层时 禁止页面滑动
文章 2322 0 0 0
发布时间:2019年05月16日

概述

在做移动端或者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;
}

Vue 弹出层时 禁止页面滑动

评论专区
Q群
Q群
Q群
反馈
纠错