原文：https://www.jianshu.com/p/79d02fc22f8b
序
在开发过程中，我们经常会遇到要加弹窗的需求，而如果当前页的展示数据一屏展示不完，则在打开弹窗后，有滑动操作时，页面也会随之滑动。那么如何处理这一问题呢？
常见问题
我们开发过程中，最常见的问题上文已叙述：打开弹窗后，有滑动操作时，页面也会随之滑动。问题示意图如下：
背景无法屏蔽弹窗.gif
最终效果
我们来看一波正确示范
可滑动弹窗.gif
解决方案
两种解决方案，针对两种不同情况：
- 弹框数据少，无需滑动
- 弹框内数据需要滑动展示
1. 无需滑动弹窗
a. 思路
思路：
vue自带修饰符可解决该问题——@touchmove.prevent
此方案重点在将@touchmove.prevent绑定到弹窗模块，然后动态控制弹窗显示隐藏即可。
b. 效果
不可滑动弹窗.gif
c. 代码
<template> <div class="modalTest"> <!-- 按钮组 --> <div class="btn"> <el-button type="success" size="small" @click="modalSign1 = true">弹窗1</el-button> </div> <!-- 背景数据 --> <div class="listBG"> <ul> <li v-for="item in 50">这是第{{item}}条背景数据</li> </ul> </div> <!-- 弹框1 --> <div class="modalBox" v-if="modalSign1" @touchmove.prevent @click.self="modalSign1 = false"> <div class="modal"> <ul> <li v-for="item in 8">这是第{{item}}条数据</li> </ul> </div> </div> </div> </template> <script> export default { data() { return { modalSign1: false, // 弹窗是否打开 } } } </script> 2. 弹框内数据需要滑动展示
a. 思路
首先，我们使用正常的vue操作，比如刚才的修饰符/语法糖进行操作时，虽然可以屏蔽掉背景数据滑动，但是该事件同时会将弹框内的滑动也阻止掉，我们则无法完成该需求。如果这个不行，我们还有别的方法来完成需求吗？
我考虑到一种方案，但是属于DOM操作，与vue的初衷可能不太符合。不过此方案也不矢为一种能够有效解决问题的办法。
思路：
利用cssposition: fixed以及top: x px来固定位置。步骤分解如下：
- 写一个样式放到公共css中备用；
- 点击按钮，控制弹窗显示隐藏；
- 两个方法，一个控制将步骤
1写的css动态添加到body上，另外一个则控制移除该效果；- 添加方法：①获取当前页面距离顶部高度，保存到data中；②给body添加步骤1的css；③设置body的高度为刚才获取到的高度。
- 移除方法： ①将刚才冬天给body添加的css移除；②当前滑动高度设置为data中存储的高度。
b. 效果
可滑动弹窗.gif
c. 两个案例完整代码
<template> <div class="modalTest"> <!-- 按钮组 --> <div class="btn"> <el-button type="success" size="small" @click="modalSign1 = true">弹窗1</el-button> <br> <el-button type="danger" size="small" @click="openModal">弹窗2</el-button> </div> <!-- 背景数据 --> <div class="listBG"> <ul> <li v-for="item in 50">这是第{{item}}条背景数据</li> </ul> </div> <!-- 弹框1 --> <div class="modalBox" v-if="modalSign1" @touchmove.prevent @click.self="modalSign1 = false"> <div class="modal"> <ul> <li v-for="item in 8">这是第{{item}}条数据</li> </ul> </div> </div> <!-- 弹框2 --> <div class="modalBox" v-if="modalSign2" @click.self="closeModal"> <div class="modal"> <ul> <li v-for="item in 20">这是第{{item}}条数据</li> </ul> </div> </div> </div> </template> <script> export default { data() { return { modalSign1: false, // 弹窗是否打开 modalSign2: false, // 弹窗是否打开 scrollTop: undefined, // 距离顶端的值 className: 'modalOpen', // 类名 } }, methods: { // 打开弹层 要做的事 afterOpen () { this.scrollTop = document.scrollingElement.scrollTop; document.body.classList.add(this.className); document.body.style.top = `-${this.scrollTop}px`; }, // 弹层关闭之前 要做的事 beforeClose () { document.body.classList.remove(this.className); document.scrollingElement.scrollTop = this.scrollTop; }, // 打开弹窗 openModal () { this.modalSign2 = true; this.afterOpen(); }, // 关闭弹窗 closeModal () { this.modalSign2 = false; this.beforeClose(); } }, mounted() { } }