解决el-dialog弹出时,页面抖动,右侧会缩小的问题(即滚动条被遮罩层覆盖的问题)

问题描述:

在弹出el-dialog时,会发现弹出框弹出时,页面会抖动,滚动条被遮罩层覆盖直接没有滚动条了,导致页面缩小了几个像素点(滚动条的宽度);体验感不好,会影响到页面的布局,且页面有的fixed定位的内容也会随着遮罩层的出现移动几个像素点;

后来我找了一下页面具体样式变化,发现弹框在出现时,会对页面的滚动条进行处理,给body增加额外的样式类;可以找到样式类重写,方法1,但是容易影响页面整体不急,不推荐。更直接的办法参考 方法2,直接不让遮罩层罩盖滚动条,滚动条正常展示,但是这样的话即使有遮罩层用户也能正常拉动滚动条;

解决方法:

方法1

  1. 在全局设置 body 的 padding-right: 0 !important;不推荐,虽然可以解决问题,但是影响了页面的布局效果;

方法2

  1. 在main.js中,找到引入element的地方,举个例子
js 复制代码
import Element from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
 
Element.Dialog.props.lockScroll.default = false;
相关推荐
汉堡大王95274 分钟前
一张图三句需求,我用 Trae Work 做了一块能看日出日落和月相的天文机械表
前端·后端·github
小小善后师14 分钟前
用 Canvas + AI 实现登录页的 Logo 粒子动画
前端·vue.js
Amos_Web14 分钟前
Rspack 源码解析(十六):多类型资源如何进入 Compilation.assets
前端·rust·前端框架
GAMC17 分钟前
chrome-devtools-mcp:让 AI 编码助手真正"看见"浏览器
前端·人工智能
deli00717 分钟前
高尔顿板:把球一颗颗丢下去,为什么最后总堆成一座钟形山
前端
java_nnnn21 分钟前
JavaEE进阶-CSS初识
java·前端·css·java-ee·html
good_ideal22 分钟前
从零实现一个自动提交 PR 的 MCP 工具:用 Skill 串起 Git 与 Azure DevOps
前端
0nirvana022 分钟前
从普通 script 到 ESM:一文搞懂 JavaScript 模块、IIFE 和 window
javascript
喜欢吃豆24 分钟前
Agent 前端协议正在分层:彻底讲清 MCP Apps、AG-UI 与 A2UI
前端·大模型
赵锦川25 分钟前
css代替表格
前端·css