滚动穿透及IOS惯性滚动究极解决方案

封装/utils/popup.js

/** 解决滚动穿透
 *  	弹窗打开时，禁用body滚动并记录当前页面滚动距离
 * 		弹窗关闭时，启用body滚动并还原滚动距离
 * 
 使用 ====  this.$popup.changeStatus(val)   @val = 弹窗显示与隐藏
 @touchmove.stop.prevent=""  备用方法
 */
let popupCount = 0 //多重弹窗计数
const $popup = {
	changeStatus(status) {
		if (status) {
			popupCount = popupCount + 1
			document.body.style.overflow = 'hidden'
		} else {
			popupCount = popupCount - 1
			if (popupCount != 0) return
			document.body.style.overflow = 'auto'
		}
	}
}
export {
	$popup
};

并设置为全局变量：

import {$popup} from '@/utils/popup.js';

Vue.prototype.$popup = $popup;

使用方式：

//监听弹窗打开关闭时，调用全局公共方法
watch: {
	customerShow(val) {
		this.$popup.changeStatus(val)
	}
}

ps:本人的项目场景属于维护，原来做的弹窗没有封装，所以只能封装公共方法一个一个地追加。如果读者的项目弹窗全局封装使用的一个，可以将以上代码直接加入到封装的组件内