本文介绍在Vue项目中解决弹窗滚动穿透问题的实用方案。通过封装ModalHelper工具类，在弹窗打开和关闭时动态控制body的样式与滚动位置，有效防止底层页面滚动。文章提供全局引入及在组件和路由守卫中调用的具体代码示例，帮助开发者快速实现交互优化。
问题背景与解决思路
弹窗是常见的交互组件，其配套的蒙层用于隔离页面与弹窗区域，暂时阻断对底层页面的操作。然而，当用户在蒙层内容区域滑动至尽头继续拖动时，若底层页面随之滚动，即产生“滚动穿透”现象，这不符合预期的交互体验，因此需要采取技术手段予以阻止。
第一步，创建工具文件 utils/modalHelper.js。
ModalHelper 核心实现
// 解决遮罩层滚动穿透问题，分别在遮罩层弹出后和关闭前调用
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第二步，在 main.js 中全局引入该 ModalHelper 模块。
全局引入配置
import ModalHelper from './utils/modalHelper'
Vue.prototype.$modalHelper = ModalHelper第三步，在具体的 Vue 页面组件中调用相关方法。
组件内调用示例
isPayment1(val) {
if (val) {
this.$modalHelper.afterOpen(); // 打开禁用
} else {
this.$modalHelper.beforeClose(); // 关闭禁用
}
},第四步，考虑到用户可能通过按键返回等操作离开页面，需在页面销毁或路由离开时执行移除禁用的逻辑，确保状态正常恢复。
路由离开时的处理
beforeRouteLeave (to, from, next) {
this.$modalHelper.beforeClose()
next()
},以上即为解决该问题的完整流程与代码实现，旨在为相关开发工作提供参考。