解决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;
相关推荐
DevOpenClub8 小时前
Markdown、HTML 和 PPT 如何稳定交付:文档转换任务的幂等发布流程
开发语言·前端·c#·html·powerpoint
DevOpenClub8 小时前
网页证据如何长期复核:快照、静态 HTML 与 PDF 归档链路
前端·pdf·html
独立开发之道8 小时前
Three.js 创建 VR 内容:四步把一个普通 3D 场景送进头显
javascript·3d·vr
Canace9 小时前
基于 Codex Agent Harness 套壳实现自己的 AI 产品:Agent 运行时与任务编排实践
前端·人工智能·agent
星栈独行9 小时前
自定义 UI-UX-Pro-Max 的 CSV 知识库,把 AI 生成的后台拉回行业该有的样子
前端·人工智能·ui·ux
hunterandroid9 小时前
[Android 从零到一] APK 体积优化实战:从 50MB 到 15MB 的瘦身之旅
android·前端
Coodor9 小时前
在前端如何转换IC卡卡号格式
前端·javascript·nfc·卡号格式
invicinble9 小时前
数字系统--c端数字环境入口和操作系统
前端
hunterandroid9 小时前
[鸿蒙从零到一] relationalStore 高级实战:事务、版本迁移与数据库加密
前端
百慕大三角10 小时前
给 SPA 加页面切换动画:View Transitions API 从入门到实战
前端·javascript