vue 背景弹出禁止滚动_vue项目弹出层后禁止body底层的滚动事件

1.新建utils/modalHelper.js文件

// 解决遮罩层滚动穿透问题，分别在遮罩层弹出后和关闭前调用

let _scrollTop

class ModalHelper {

// popup 显示时调用

static afterOpen () {

_scrollTop = document.scrollingElement.scrollTop

document.body.style.position = 'fixed'

document.body.style.top = -_scrollTop + 'px'

}

// popup 关闭时调用

static beforeClose () {

document.body.style.position = ''

document.body.style.top = ''

// 使 scrollTop 恢复原状

document.scrollingElement.scrollTop = _scrollTop

}

}

export default ModalHelper

2.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(); // 关闭禁用

}

},

4.为避免用户使用按键返回，需在页面离开时移除禁用即可

beforeRouteLeave (to, from, next) {

this.$modalHelper.beforeClose()

next()

},