解决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;
相关推荐
IT_陈寒1 天前
Java中equals方法比了个寂寞?原来这才是正确的重写姿势
前端·人工智能·后端
默_笙1 天前
🚓 分诊台与拆题术:让 RAG 学会判断和规划
前端·javascript
CopyCode1 天前
用 AI 迁项目有多爽?我把 Webpack 迁 Vite 的全过程记下来了
前端·架构
去伪存真1 天前
Electron 自动化发布指南:GitHub Actions 跨平台打包全纪录
前端·electron
计算机魔术师1 天前
OpenAI智能体失控闯进美国政府网站,53张用户图片外泄背后
前端
颜进强1 天前
14 · NestJS ExecutionContext 执行上下文:守卫、拦截器、过滤器拿到的"同一个 context",为什么能力不一样?
前端·后端·ai编程
程序员Flycan1 天前
🚀 跨域终结者:前端代理服务器(Proxy)原理解析与配置总结
前端
怕浪猫1 天前
顶级模型一句话,AI 写出了能玩的 QQ飞车
前端·面试·github
huakoh1 天前
MCP 报错分不清?先看响应里是 result 还是 error
前端
呃呃呃呃ex1 天前
10. 现代前端工程化:ES6 React 项目实战与原理解析
前端·javascript