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。

相关推荐
很晚很晚了6 小时前
纯前端转全栈 Day 1:我从第一个 NestJS 接口开始
前端
Lee川7 小时前
从零解剖一个 AI Agent Tool是如何实现的
前端·人工智能·后端
wangruofeng8 小时前
Playwright 深度调研:为什么它成了浏览器自动化的新底座
前端·测试
李白的天不白10 小时前
SSR服务端渲染
前端
卷帘依旧11 小时前
SSE(Server-Sent Events)完全指南
前端
码云之上11 小时前
万星入坞:我们如何用三层插件体系干掉巨石应用
前端·架构·前端框架
kyriewen11 小时前
一口气讲清楚 Monorepo、Turborepo、pnpm、Changesets 到底是什么?
前端·架构·前端工程化
IT_陈寒12 小时前
React性能优化踩的坑,这个错你可能也会犯
前端·人工智能·后端
zhangxingchao12 小时前
AI应用开发三:RAG技术与应用
前端·人工智能·后端
摘星小杨12 小时前
如何在前端循环调取接口,实时查询数据
开发语言·前端·javascript