原文：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() { } }