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');
这样就可以解决滚动穿透的问题了~
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。