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。

相关推荐
码视野17 分钟前
基于 Vue3 + Element Plus 的【基于 Vue3 的智慧健身房会员管理与私教团课预约核销系统】设计与实现(附完整源码与PRD)
前端·vue3
烤羊腿的程序员20 分钟前
前端面试知识点大全(带答案)
前端·面试·职场和发展
软件技术NINI24 分钟前
传统文化html+css 5页
前端·css·html
优秀稳妥的JiaJi25 分钟前
从产品原型到前端开发的需求清单,从1小时到25分钟
前端·trae
manongdashu18829 分钟前
应对“SEO需要支付一年服务费”的捆绑消费,静态建站配套终身低成本服务器,全程无需额外运维开销。的方法。
运维·服务器·前端·seo·静态网站
风骏时光牛马33 分钟前
AI提示词有效性深度测试
前端
Su米苏34 分钟前
针对使用@vue-office 出现的包异常找不到问题
前端·javascript·vue.js
坚定信念,勇往无前37 分钟前
electron打包mac ,apple m4出错:ffprobe是x86,不是arm64
前端·javascript·electron
用户83134859306981 小时前
Cesium实现动态流动火烧云晚霞效果(可用slider调整火烧云浓度)
vue.js·webgl·cesium