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