vue 彈框產生的滾動穿透問題的解決
阿新 • • 發佈：2018-11-10
最近開發過程中遇到一些小問題(似乎問題總是那麼多)，但一直沒什麼時間去優化與解決。程式設計師不能被業務綁架，有時間還是花點在程式碼，開始這次的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'
);
|
這樣就可以解決滾動穿透的問題了~