js使彈層下面的body禁止?jié)L動(dòng)

更新時(shí)間：2022年06月28日 08:38:40 作者：小旭2021

這篇文章介紹了js使彈層下面body禁止?jié)L動(dòng)的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

彈窗是一種常見(jiàn)的交互方式，而蒙層是彈窗必不可少的元素，用于隔斷頁(yè)面與彈窗區(qū)塊，暫時(shí)阻斷頁(yè)面的交互。但是，在蒙層元素中滑動(dòng)的時(shí)候，滑到內(nèi)容的盡頭時(shí)，再繼續(xù)滑動(dòng)，蒙層底部的頁(yè)面會(huì)開(kāi)始滾動(dòng)，顯然這不是我們想要的效果，因此需要阻止這種行為。

1.新建utils/modalHelper.js文件

// 解決遮罩層滾動(dòng)穿透問(wèn)題，分別在遮罩層彈出后和關(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 ModalHelper

2.main.js中全局引入ModalHelper

import ModalHelper from './utils/modalHelper'
Vue.prototype.$modalHelper = ModalHelper

3.vue頁(yè)面使用

isPayment1(val) {
  if (val) {
    this.$modalHelper.afterOpen(); // 打開(kāi)禁用
  } else {
    this.$modalHelper.beforeClose(); // 關(guān)閉禁用
  }
},

4.為避免用戶使用按鍵返回，需在頁(yè)面離開(kāi)時(shí)移除禁用即可

beforeRouteLeave (to, from, next) {
  this.$modalHelper.beforeClose()
  next()
},

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue組件創(chuàng)建的三種方式小結(jié)
這篇文章主要介紹了vue組件創(chuàng)建的三種方式小結(jié)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-02-02
JavaScript中實(shí)現(xiàn)鍵值對(duì)應(yīng)的字典與哈希表結(jié)構(gòu)的示例
字典或者哈希表這樣的鍵值對(duì)應(yīng)結(jié)構(gòu)在其他很多語(yǔ)言中都有內(nèi)置,非常好用,這里我們來(lái)看一下JavaScript中實(shí)現(xiàn)鍵值對(duì)應(yīng)的字典與哈希表結(jié)構(gòu)的示例:
2016-06-06
Bootbox將后臺(tái)JSON數(shù)據(jù)填充Form表單的實(shí)例代碼
通過(guò)控制器創(chuàng)建一個(gè)Index視圖，寫(xiě)入下列HTML代碼，這里我創(chuàng)建了一個(gè)分部視圖，不創(chuàng)建直接寫(xiě)在同一個(gè)頁(yè)面也是一樣的效果。這篇文章主要介紹了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的用法
這篇文章主要介紹了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ī)?lái)一篇詳談構(gòu)造函數(shù)加括號(hào)與不加括號(hào)的區(qū)別。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-10-10
CodeReview常見(jiàn)的幾個(gè)問(wèn)題梳理解決示例
這篇文章主要為大家介紹了CodeReview常見(jiàn)的幾個(gè)問(wèn)題梳理解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(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