js使弹层下面的body禁止滚动

js使弹层下面的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() },

推荐阅读