最近开发过程中遇到一些小问题(似乎问题总是那么多)，但一直没什么时间去优化与解决。程序员不能被业务绑架，有时间还是花点在代码，开始这次的vue尝试吧。
首先定义一个全局样式：
前端精品教程：百度网盘下载
|
1
2
3
4
5
6
|
.noscroll{
position
:
fixed
;
left
:
0
;
top
:
0
;
width
:
100%
;
}
|
创建一个dom.js文件，定义几个方法：
前端精品教程：百度网盘下载
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
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：
|
1
|
this
.htmlDom = document.getElementsByTagName(
'html'
)[0];
|
在弹框弹出来的时候：
前端精品教程：百度网盘下载
|
1
|
addClass(
this
.htmlDom,
'noscroll'
);
|
弹框关闭的时候
|
1
|
removeClass(
this
.htmlDom,
'noscroll'
);
|
这样就可以解决滚动穿透的问题了~