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