vue项目使用iview☞Modal后页面不能滚动的诡异问题

部分版本(360、谷歌)浏览器,页面不能正常滚动,但是我自己的怎么就好好的,

本着有问题一定解决原则,找到问题机器,查找原因,发现个诡异的东西,浏览器竟然自动在body上加了一个"overflow:hidden"

妹的,覆盖掉,在body中加上overflow:auto,完美解决

未完

查本究源,为什么会加个"overflow:auto"属性哪?发现是使用了iview的modal组件。该组件有个默认属性scrollable为false(页面是否可以滚动),当打开modal时候,会在body中添加"overflow:hidden"属性,来禁止页面滚动,在modal关闭时候,"overflow:hidden"会被删掉。

这一切看着没什么问题呀,但是我使用的时候就出现问题了哪?

我是将modal封装为一个子组件,使用vuex控制modal的显示与隐藏,在打开组件的时候,正常,body中添加了"overflow:hidden",但是在关闭的时候,"overflow:hidden"并没有被删除掉,一直存在body中,随后影响其他页面的正常滚动。

题外话--使用ElementUI的"dialog"时候,有"before-close"等方法可以操作vuex状态之类的东东,感觉iview的modal扩展性不强。

暂时的解决方法是,先将scrollable设为true。

相关推荐
陈随易5 分钟前
副业搞钱点子之独立开发
前端·后端·程序员
console.log('npc')14 分钟前
问题跟踪与知识沉淀:从任务到知识的闭环)
前端·javascript·人工智能
恋猫de小郭32 分钟前
最近 Android 有什么更新:Android Dev Summit 2026 技术解读
android·前端·flutter
计算机魔术师34 分钟前
Reddit 宣布转向以登录为主的体验,以应对 AI 搜索带来的流量下滑
前端
熊猫钓鱼>_>34 分钟前
上架审核常见驳回与隐私合规清单:过审前先自查这 8 条【鸿蒙心迹】
开发语言·前端·华为·华为云·harmonyos·openharmony·ai制作
missile11136 分钟前
# HDR 算法 ISP 通路客制化方案(G100 / mt6789)
java·前端·javascript
全栈陈序员1 小时前
【Python】基础语法入门(三十)—— Web 开发入门:用 Flask 搭建第一个网站
前端·python·flask
万少1 小时前
Harmony 7.0 这个skill帮你自动化操作AGC
前端·javascript·后端
小大宇1 小时前
Vue知识点-ElementPlus-02图标
前端·javascript·vue.js
简简单单就是我_hehe1 小时前
一次 ClickHouse 服务器磁盘告警的排查与修复实录
java·服务器·前端