网络编程
位置：首页>> 网络编程>> JavaScript>> vue 弹框产生的滚动穿透问题的解决

vue 弹框产生的滚动穿透问题的解决

作者：Peggy7　　发布时间：2024-04-26 17:40:54　

标签：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');

这样就可以解决滚动穿透的问题了~

来源：https://segmentfault.com/a/1190000016481693

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com