今天在写PC商城首页,发现了一个头疼的问题,需求是点击商城首页消息列表弹出一个弹框,弹框用的是element
e-dialog组件
,当弹框出现的时候,整个页面会向右偏移,难道是页面或者消息组件css的问题?经过排查没有发现什么问题~ 我又琢磨一番又想到了是e-dialog
自身是否插入至body
元素上 的问题?然后我加上了append-to-body="true"
,ctrl+s之后发现还不行... 奇怪了? 折腾好一会儿发现 弹框出现的时候body
上会出现padding-right:17px
,弹框消失,padding-right:17px
也隐藏了。
一、产生原因
e-dialog
多次弹窗导致页面左移,屏幕晃动的bug,原因有两个:
1、e-dialog
模态框显示时,框架默认给body
添加一个padding-right
为17px的样式
2、modal-open
的overflow:hidden
导致原本有的滚动条消失,窗口重新调整大小,造成屏幕晃动。
二、解决办法
- 在
index.css
或者app.vue
主入口加上:
body { padding-right: 0px !important; }
.modal-open { overflow-y: scroll; padding-right: 0 !important;}