解决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;
相关推荐
_AaronWong6 分钟前
Electron 实现仿豆包划词取词功能:从 AI 生成到落地踩坑记
前端·javascript·vue.js
cxxcode7 分钟前
I/O 多路复用:从浏览器到 Linux 内核
前端
用户54330814419415 分钟前
AI 时代,前端逆向的门槛已经低到离谱 — 以 Upwork 为例
前端
JarvanMo19 分钟前
Flutter 版本的 material_ui 已经上架 pub.dev 啦!快来抢先体验吧。
前端
JohnYan24 分钟前
工作笔记-CodeBuddy应用探索
javascript·ai编程·aiops
恋猫de小郭1 小时前
AI 可以让 WIFI 实现监控室内人体位置和姿态,无需摄像头?
前端·人工智能·ai编程
哀木1 小时前
给自己整一个 claude code,解锁编程新姿势
前端
程序员鱼皮1 小时前
GitHub 关注突破 2w,我总结了 10 个涨星涨粉技巧!
前端·后端·github
UrbanJazzerati1 小时前
Vue3 父子组件通信完全指南
前端·面试
是一碗螺丝粉1 小时前
5分钟上手LangChain.js:用DeepSeek给你的App加上AI能力
前端·人工智能·langchain