js使彈層下面的body禁止?jié)L動(dòng)
更新時(shí)間：2022年06月28日 08:38:40 作者：小旭2021
這篇文章介紹了js使彈層下面body禁止?jié)L動(dòng)的方法，文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
彈窗是一種常見的交互方式，而蒙層是彈窗必不可少的元素，用于隔斷頁面與彈窗區(qū)塊，暫時(shí)阻斷頁面的交互。但是，在蒙層元素中滑動(dòng)的時(shí)候，滑到內(nèi)容的盡頭時(shí)，再繼續(xù)滑動(dòng)，蒙層底部的頁面會(huì)開始滾動(dòng)，顯然這不是我們想要的效果，因此需要阻止這種行為。
1.新建utils/modalHelper.js文件
// 解決遮罩層滾動(dòng)穿透問題，分別在遮罩層彈出后和關(guān)閉前調(diào)用
let _scrollTop
class ModalHelper {
// popup 顯示時(shí)調(diào)用
static afterOpen () {
_scrollTop = document.scrollingElement.scrollTop
document.body.style.position = 'fixed'
document.body.style.top = -_scrollTop + 'px'
}
// popup 關(guān)閉時(shí)調(diào)用
static beforeClose () {
document.body.style.position = ''
document.body.style.top = ''
// 使 scrollTop 恢復(fù)原狀
document.scrollingElement.scrollTop = _scrollTop
}
}
export default ModalHelper2.main.js中全局引入ModalHelper
import ModalHelper from './utils/modalHelper' Vue.prototype.$modalHelper = ModalHelper
3.vue頁面使用
isPayment1(val) {
if (val) {
this.$modalHelper.afterOpen(); // 打開禁用
} else {
this.$modalHelper.beforeClose(); // 關(guān)閉禁用
}
},4.為避免用戶使用按鍵返回，需在頁面離開時(shí)移除禁用即可
beforeRouteLeave (to, from, next) {
this.$modalHelper.beforeClose()
next()
},以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue組件創(chuàng)建的三種方式小結(jié)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
JavaScript中實(shí)現(xiàn)鍵值對(duì)應(yīng)的字典與哈希表結(jié)構(gòu)的示例
字典或者哈希表這樣的鍵值對(duì)應(yīng)結(jié)構(gòu)在其他很多語言中都有內(nèi)置,非常好用,這里我們來看一下JavaScript中實(shí)現(xiàn)鍵值對(duì)應(yīng)的字典與哈希表結(jié)構(gòu)的示例:2016-06-06
Bootbox將后臺(tái)JSON數(shù)據(jù)填充Form表單的實(shí)例代碼
通過控制器創(chuàng)建一個(gè)Index視圖，寫入下列HTML代碼，這里我創(chuàng)建了一個(gè)分部視圖，不創(chuàng)建直接寫在同一個(gè)頁面也是一樣的效果。這篇文章主要介紹了Bootbox將后臺(tái)JSON數(shù)據(jù)填充Form表單 ,需要的朋友可以參考下2018-09-09
javascript中call apply 的應(yīng)用場(chǎng)景
call, apply都屬于Function.prototype的一個(gè)方法,它是JavaScript引擎內(nèi)在實(shí)現(xiàn)的,因?yàn)閷儆贔unction.prototype,所以每個(gè)Function對(duì)象實(shí)例,也就是每個(gè)方法都有call, apply屬性.2015-04-04
jquery實(shí)現(xiàn)左右滑動(dòng)式輪播圖
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)左右滑動(dòng)式輪播圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
這篇文章主要介紹了JS中substring與substr的用法講解，非常不錯(cuò)，具有參考借鑒價(jià)值，感興趣的朋友一起看看吧2016-11-11
JS 組件系列之BootstrapTable的treegrid功能
這篇文章主要介紹了JS 組件系列之BootstrapTable的treegrid功能,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-06-06
詳談構(gòu)造函數(shù)加括號(hào)與不加括號(hào)的區(qū)別
下面小編就為大家?guī)硪黄斦剺?gòu)造函數(shù)加括號(hào)與不加括號(hào)的區(qū)別。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-10-10
這篇文章主要為大家介紹了CodeReview常見的幾個(gè)問題梳理解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
IE中g(shù)etElementsByName()對(duì)有些元素?zé)o效的解決方案
這篇文章主要介紹了IE中g(shù)etElementsByName()對(duì)有些元素?zé)o效的解決方案,很簡(jiǎn)單，很實(shí)用，需要的朋友可以參考下2014-09-09