vue 彈框產(chǎn)生的滾動穿透問題的解決
更新時間：2018年09月21日 14:59:15 作者：Peggy7
這篇文章主要介紹了vue 彈框產(chǎn)生的滾動穿透問題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
最近開發(fā)過程中遇到一些小問題(似乎問題總是那么多)，但一直沒什么時間去優(yōu)化與解決。程序員不能被業(yè)務(wù)綁架，有時間還是花點在代碼，開始這次的vue嘗試吧。
首先定義一個全局樣式：
.noscroll{
position: fixed;
left: 0;
top: 0;
width: 100%;
}
創(chuàng)建一個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');
彈框關(guān)閉的時候
removeClass(this.htmlDom, 'noscroll');
這樣就可以解決滾動穿透的問題了~
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue實現(xiàn)表格數(shù)據(jù)的增刪改查的示例代碼
Vue是一個用于構(gòu)建用戶界面的JavaScript框架,在Vue中可以通過使用Vue組件來實現(xiàn)對表格的增刪改查操作,下面將介紹一些基礎(chǔ)的Vue組件和技術(shù)來實現(xiàn)對表格的增刪改查操作,需要的朋友可以參考下2024-08-08
這篇文章主要介紹了如何修改el-form-item 的label的字體顏色問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
vue對象復(fù)制方式(深拷貝,多層對象拷貝方式在后面)
這篇文章主要介紹了vue對象復(fù)制方式(深拷貝,多層對象拷貝方式在后面)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
在平時開發(fā)的時候很多情況都會使用到表格和分頁功能,下面這篇文章主要給大家介紹了關(guān)于如何基于Element-Ui封裝公共表格組件的詳細圖文步驟,需要的朋友可以參考下2022-09-09
vue前臺顯示500和405錯誤的解決(springboot為后臺)
這篇文章主要介紹了vue前臺顯示500和405錯誤的解決(springboot為后臺)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
vue預(yù)覽本地pdf文件方法之vue-pdf組件使用
這篇文章主要介紹了vue預(yù)覽本地pdf文件方法之vue-pdf組件使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
html2canvas.js是一款可以在網(wǎng)頁上實現(xiàn)頁面截圖的js,它使用了html5和css3的一些新功能特性,實現(xiàn)了在客戶端對網(wǎng)頁進行截圖的功能,這篇文章主要給大家介紹了關(guān)于html2canvas使用的相關(guān)資料,需要的朋友可以參考下2024-03-03
vue3?+?elementPlus?reset重置表單問題
這篇文章主要介紹了vue3?+?elementPlus?reset重置表單問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
Electron?store及shareObject進程間數(shù)據(jù)交互存儲功能封裝
這篇文章主要為大家介紹了Electron?store及shareObject進程間數(shù)據(jù)交互存儲功能封裝示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
這篇文章主要介紹了Vue使用Canvas繪制圖片、矩形、線條、文字，下載圖片的相關(guān)知識，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-04-04