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。

相关推荐
S***y39610 分钟前
前端微前端框架对比,qiankun与icestark
前端·前端框架
Wect21 分钟前
学习React-DnD:实现多任务项拖拽-useDrop处理
前端·react.js
Mintopia39 分钟前
Trae Coding - 「Excel 秒变海报」—— 上传 CSV,一句话生成可打印信息图。
前端·人工智能·trae
晴殇i1 小时前
CSS 相对颜色:告别 180 个颜色变量的设计系统噩梦
前端·css
MegatronKing1 小时前
Reqable 3.0版本云同步的实践过程
前端·后端·测试
李剑一1 小时前
我用Trae生成了一个Echarts 3D柱状图的Demo
前端·vue.js·trae
Crystal3281 小时前
3D实战案例(飞行的火箭/创建3D导航/翻书效果/创建长方体/环环相扣效果)
前端·css
6***x5451 小时前
前端组件库发展趋势,原子化CSS会成为主流吗
前端·css
00后程序员张1 小时前
接口调试从入门到精通,Fiddler抓包工具、代理配置与HTTPS抓包实战技巧
前端·ios·小程序·https·fiddler·uni-app·webview
快手技术1 小时前
闪耀NeurIPS 2025!快手13篇论文入选,Spotlight 成果跻身前三!
前端·后端