vue 弹框产生的滚动穿透问题的解决
程序员文章站
2023-11-15 13:17:34
最近开发过程中遇到一些小问题(似乎问题总是那么多)，但一直没什么时间去优化与解决。程序员不能被业务绑架，有时间还是花点在代码，开始这次的vue尝试吧。
首先定义一个全局样...
最近开发过程中遇到一些小问题(似乎问题总是那么多)，但一直没什么时间去优化与解决。程序员不能被业务绑架，有时间还是花点在代码，开始这次的vue尝试吧。
首先定义一个全局样式：
.noscroll{
position: fixed;
left: 0;
top: 0;
width: 100%;
}
创建一个dom.js文件，定义几个方法：
export function hasclass(el, classname) {
let reg = new regexp('(^|\\s)' + classname + '(\\s|$)')
return reg.test(el.classname)
}
export function addclass(el, classname) {
if (hasclass(el, classname)) {
return
}
if(el.classname === ''){
el.classname += classname
}else{
let newclass = el.classname.split(' ')
newclass.push(classname)
el.classname = newclass.join(' ')
}
}
export function removeclass(el,classname) {
if (hasclass(el, classname)) {
el.classname = el.classname.replace(new regexp('(\\s|^)' + classname + '(\\s|$)'), '');
};
}
获取<html>标签的dom：
this.htmldom = document.getelementsbytagname('html')[0];
在弹框弹出来的时候：
addclass(this.htmldom, 'noscroll');
弹框关闭的时候
removeclass(this.htmldom, 'noscroll');
这样就可以解决滚动穿透的问题了~
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。