彈窗是一種常見(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)文章

js動(dòng)態(tài)引入的四種方法
下面小編就為大家?guī)?lái)一篇關(guān)于js動(dòng)態(tài)引入四種方式的實(shí)例代碼，具有很好的參考價(jià)值，分享給大家一起跟隨小編過(guò)來(lái)看看吧
2018-05-05
JavaScript創(chuàng)建對(duì)象的七種經(jīng)典方式分享
JavaScript 創(chuàng)建對(duì)象的方式有很多，通過(guò) Object 構(gòu)造函數(shù)或?qū)ο笞置媪康姆绞揭部梢詣?chuàng)建單個(gè)對(duì)象，顯然這兩種方式會(huì)產(chǎn)生大量的重復(fù)代碼，并不適合量產(chǎn)。本文介紹了七種非常經(jīng)典的創(chuàng)建對(duì)象的方式，希望對(duì)大家有所幫助
2022-11-11
基于JavaScript偽隨機(jī)正態(tài)分布代碼實(shí)例
這篇文章主要介紹了基于JavaScript偽隨機(jī)正態(tài)分布代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-11-11
用javascript實(shí)現(xiàn)自定義標(biāo)簽
用javascript實(shí)現(xiàn)自定義標(biāo)簽...
2007-05-05
一篇文章弄懂ECMAScript中的操作符
這篇文章主要給大家介紹了如何通過(guò)一篇文章弄懂ECMAScript中操作符的相關(guān)資料,其中包括一元操作符、布爾操作符、乘性操作符、加性操作符、關(guān)系操作符、相等操作符、條件操作符、賦值操作符以及逗號(hào)操作符,需要的朋友可以參考下
2021-07-07
深入理解JavaScript中實(shí)例對(duì)象和new命令
典型的面向?qū)ο缶幊陶Z(yǔ)言(比如C++和 Java),都有“類”(class)這個(gè)概念。所謂“類”就是對(duì)象的模板,對(duì)象就是“類”的實(shí)例,下面這篇文章主要給大家介紹了關(guān)于JavaScript中實(shí)例對(duì)象和new命令的相關(guān)資料,需要的朋友可以參考下
2022-12-12
JS實(shí)現(xiàn)表單中checkbox對(duì)勾選中增加邊框顯示效果
這篇文章主要介紹了JS實(shí)現(xiàn)表單中checkbox對(duì)勾選中增加邊框顯示效果,可實(shí)現(xiàn)點(diǎn)擊后圖片增加邊框及勾選的功能,非常簡(jiǎn)潔實(shí)用,需要的朋友可以參考下
2015-08-08
手寫(xiě)Spirit防抖函數(shù)underscore和節(jié)流函數(shù)lodash
這篇文章主要介紹了手寫(xiě)Spirit防抖函數(shù)underscore和節(jié)流函數(shù)lodash，接下來(lái)將會(huì)帶你們了解下這兩者的區(qū)別,以及我們?cè)撊绾问謱?xiě)實(shí)現(xiàn)這兩個(gè)函數(shù)
2022-03-03
JS交互點(diǎn)擊WKWebView中的圖片實(shí)現(xiàn)預(yù)覽效果
這篇文章主要介紹了JS交互點(diǎn)擊WKWebView中的圖片實(shí)現(xiàn)預(yù)覽效果,需要的朋友可以參考下
2018-01-01
JavaScript聲明變量名的語(yǔ)法規(guī)則
這篇文章主要給大家簡(jiǎn)單介紹了JavaScript聲明變量名的語(yǔ)法規(guī)則，非常有助于大家學(xué)習(xí)javascript，有需要的小伙伴可以參考下。
2015-07-07