js 弹层下面的body禁止滚动

弹窗是一种常见的交互方式，而蒙层是弹窗必不可少的元素，用于隔断页面与弹窗区块，暂时阻断页面的交互。但是，在蒙层元素中滑动的时候，滑到内容的尽头时，再继续滑动，蒙层底部的页面会开始滚动，显然这不是我们想要的效果，因此需要阻止这种行为。

1.新建utils/modalHelper.js文件

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

// 解决遮罩层滚动穿透问题，分别在遮罩层弹出后和关闭前调用 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

?

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

3.vue页面使用

?

1 2 3 4 5 6 7

isPayment1(val) {   if (val) {     this.$modalHelper.afterOpen(); // 打开禁用   } else {     this.$modalHelper.beforeClose(); // 关闭禁用   } },

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

?

1 2 3 4

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

参考:

1、https://blog.csdn.net/guxiansheng1991/article/details/80503497

2、https://www.cnblogs.com/yongwang/p/7804490.html