vue 弹框产生的滚动穿透问题的解决
最近开发过程中遇到一些小问题(似乎问题总是那么多),但一直没什么时间去优化与解决。程序员不能被业务绑架,有时间还是花点在代码,开始这次的vue尝试吧。
首先定义一个全局样式:
.noscroll{
position:fixed;
left:0;
top:0;
width:100%;
}
创建一个dom.js文件,定义几个方法:
exportfunctionhasClass(el,className){
letreg=newRegExp('(^|\\s)'+className+'(\\s|$)')
returnreg.test(el.className)
}
exportfunctionaddClass(el,className){
if(hasClass(el,className)){
return
}
if(el.className===''){
el.className+=className
}else{
letnewClass=el.className.split('')
newClass.push(className)
el.className=newClass.join('')
}
}
exportfunctionremoveClass(el,className){
if(hasClass(el,className)){
el.className=el.className.replace(newRegExp('(\\s|^)'+className+'(\\s|$)'),'');
};
}
获取标签的DOM:
this.htmlDom=document.getElementsByTagName('html')[0];
在弹框弹出来的时候:
addClass(this.htmlDom,'noscroll');
弹框关闭的时候
removeClass(this.htmlDom,'noscroll');
这样就可以解决滚动穿透的问题了~
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。
热门推荐
10 八一幼儿祝福语大全简短
11 公司乔迁食堂祝福语简短
12 婚礼结束聚餐祝福语简短
13 儿媳买车妈妈祝福语简短
14 毕业送礼老师祝福语简短
15 同事辞职正常祝福语简短
16 恭贺新婚文案祝福语简短
17 金店立秋祝福语简短英文
18 婆婆高寿祝福语大全简短