【解决】vue 弹窗后面页面可以滚动问题

做web端项目过程中,发现点击弹窗后,弹窗后面的页面还可以滚动。

复现如下:

【方法1】

step1:在弹框页面使用

javascript 复制代码
@mousewheel.prevent
javascript 复制代码
<div
    v-show="workShowMenu"
    @mousewheel.prevent
 >
 // TO DO...弹框内容
</div>

注意:该方法不适用于弹框上也有滚动条的时候,会失效。

方法2】

step1:在点击出现弹框的事件里加上这句:

javascript 复制代码
document.documentElement.style.overflow = "hidden";

step2:在点击关闭弹框的事件里加上这句:

javascript 复制代码
document.documentElement.style.overflow = "scroll";

【优化】

若项目里使用弹窗较多,则可以通过在原型上定义它们使其在每个 Vue 的实例中可用(main.js)

javascript 复制代码
//弹出框后面页面禁止滑动
Vue.prototype.$stopScroll = function () {
  document.documentElement.style.overflow = "hidden";
}

//弹出框后面页面可以滑动
Vue.prototype.$allowScroll = function () {
   document.documentElement.style.overflow = "scroll";
}

step1:在点击出现弹框的事件里加上这句:

javascript 复制代码
this.$stopScroll();

step2:在点击关闭弹框的事件里加上这句:

javascript 复制代码
this.$allowScroll();

注:两个事件之所以要用开头,因为 是在 Vue所有实例中都可用的属性的一个简单约定。这样做会避免和已被定义的数据、方法、计算属性产生冲突。

相关推荐
程序猿阿伟11 小时前
《首屏加载优化手册:Vue3+Element Plus项目提速的技术细节》
前端·javascript·vue.js
麦麦大数据11 小时前
D030知识图谱科研文献论文推荐系统vue+django+Neo4j的知识图谱|论文本文相似度推荐|协同过滤
vue.js·爬虫·django·知识图谱·科研·论文文献·相似度推荐
尘觉11 小时前
面试-浅复制和深复制?怎样实现深复制详细解答
javascript·面试·职场和发展
fruge12 小时前
Vue Pinia 状态管理实战指南
前端·vue.js·ubuntu
绝无仅有13 小时前
某教育大厂面试题解析:MySQL索引、Redis缓存、Dubbo负载均衡等
vue.js·后端·面试
sean13 小时前
开发一个自己的 claude code
前端·后端·ai编程
用户214118326360213 小时前
dify案例分享-用 Dify 一键生成教学动画 HTML!AI 助力,3 分钟搞定专业级课件
前端
chxii13 小时前
ISO 8601日期时间标准及其在JavaScript、SQLite与MySQL中的应用解析
开发语言·javascript·数据库
没逛够14 小时前
Vue 自适应高度表格
javascript·vue.js·elementui
太过平凡的小蚂蚁15 小时前
Kotlin 协程中常见的异步返回与控制方式(速览)
开发语言·前端·kotlin