vue弹窗 禁止滚动 实现vue弹窗后页面如何禁止背景滚动的方法

Vue弹窗禁止滚动实现方法关键词：

1. CSS固定背景

   • overflow: hidden
   • position: fixed
   • body锁定

2. Vue指令控制

   

   • v-if/v-show 控制弹窗显示
   • @scroll 事件监听
   • preventDefault() 阻止默认滚动

3. 动态类名切换

   • :class="{ 'no-scroll': isModalOpen }"
   • 弹窗开启时添加禁止滚动类

4. Touch事件处理（移动端）

   

   • @touchmove.stop.prevent
   • 禁止弹窗内穿透滚动

5. 第三方库支持

   • vue-body-scroll-lock
   • body-scroll-lock 封装

6. 兼容性注意事项

   

   • 滚动条宽度补偿
   • 多弹窗堆叠管理

参考实现逻辑：弹窗显示时动态修改body样式，隐藏时恢复。