解决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;
相关推荐
小贤哥8 分钟前
死磕这几道js手写题
前端·程序员
Lee川9 分钟前
🌐 深入 Chrome 浏览器:从单线程到多进程架构的进化之路
前端·架构·前端框架
学以智用12 分钟前
Vue 3 项目核心配置文件详解
前端·vue.js
工边页字15 分钟前
AI 开发必懂:Context Window(上下文窗口)到底是什么?
前端·人工智能·后端
Mr_Swilder17 分钟前
intel显卡本地部署大模型
前端
yuki_uix17 分钟前
Promise 与 async/await:从回调地狱到优雅异步的演进之路
前端·javascript
over69720 分钟前
📸《拍照记单词》—— 从零到上线的完整开发指南(超详细版)
前端·人工智能·产品
毛骗导演21 分钟前
万字解析 OpenClaw 源码架构-架构概览
前端·架构
天才熊猫君29 分钟前
Flex布局深度解析:为什么我的Flex项目不按预期收缩?
前端
风雪心30 分钟前
Antd组件库Form的onValuesChange和getFieldsValue的调用时机分析
前端