vue 彈框產(chǎn)生的滾動穿透問題的解決
更新時(shí)間：2018年09月21日 14:59:15 作者：Peggy7
這篇文章主要介紹了vue 彈框產(chǎn)生的滾動穿透問題，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
最近開發(fā)過程中遇到一些小問題(似乎問題總是那么多)，但一直沒什么時(shí)間去優(yōu)化與解決。程序員不能被業(yè)務(wù)綁架，有時(shí)間還是花點(diǎn)在代碼，開始這次的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];
在彈框彈出來的時(shí)候：
addClass(this.htmlDom, 'noscroll');
彈框關(guān)閉的時(shí)候
removeClass(this.htmlDom, 'noscroll');
這樣就可以解決滾動穿透的問題了~
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于vue3.0 sfc中setup變化的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2021-10-10
這篇文章主要介紹了Vue中slot的使用詳解，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
今天小編就為大家分享一篇vue實(shí)例中data使用return包裹的方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
詳解如何使用router-link對象方式傳遞參數(shù)？
這篇文章主要介紹了如何使用router-link對象方式傳遞參數(shù)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
vue中的核心就是組件，組件 (Component) 是 Vue.js 最強(qiáng)大的功能之一。組件可以擴(kuò)展 HTML 元素，封裝可重用的代碼，下面通過本文重點(diǎn)給大家介紹vue 創(chuàng)建組件及組件使用方法，感興趣的朋友一起看看吧2017-07-07
vue點(diǎn)擊按鈕實(shí)現(xiàn)讓頁面的某一個(gè)元素全屏展示
這篇文章主要介紹了vue點(diǎn)擊按鈕實(shí)現(xiàn)讓頁面的某一個(gè)元素全屏展示，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了vue返回上一頁面時(shí)不刷新問題及解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
ElementUI組件Dialog彈窗再次打開表單仍顯示上次數(shù)據(jù)的問題
這篇文章主要介紹了ElementUI組件Dialog彈窗再次打開表單仍顯示上次數(shù)據(jù)的問題及解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
本文通過實(shí)例代碼給大家詳細(xì)分享了Vue父組件向子組件傳值的過程以及關(guān)鍵點(diǎn)講解，一起學(xué)習(xí)參考下吧。2018-02-02
定時(shí)器如果不及時(shí)合理地清除，會造成業(yè)務(wù)邏輯混亂甚至應(yīng)用卡死的情況，這個(gè)時(shí)就需要清除定時(shí)器，本文就介紹了Vue如何優(yōu)雅的清除定時(shí)器，感興趣的可以了解一下2021-07-07