解决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;
相关推荐
nvd1115 分钟前
企业级 LLM 实战:在受限环境中基于 Copilot API 构建 ReAct MCP Agent
前端·copilot
+VX:Fegn089521 分钟前
计算机毕业设计|基于springboot + vue校园实验室管理系统(源码+数据库+文档)
数据库·vue.js·spring boot·后端·课程设计
Dragon Wu25 分钟前
TailWindCss cva+cn管理样式
前端·css
烤麻辣烫29 分钟前
Web开发概述
前端·javascript·css·vue.js·html
Front思40 分钟前
Vue3仿美团实现骑手路线规划
开发语言·前端·javascript
徐同保42 分钟前
Nano Banana AI 绘画创作前端代码(使用claude code编写)
前端
Ulyanov43 分钟前
PyVista与Tkinter桌面级3D可视化应用实战
开发语言·前端·python·3d·信息可视化·tkinter·gui开发
计算机程序设计小李同学43 分钟前
基于Web和Android的漫画阅读平台
java·前端·vue.js·spring boot·后端·uniapp
干前端1 小时前
Message组件和Vue3 进阶:手动挂载组件与 Diff 算法深度解析
javascript·vue.js·算法
lkbhua莱克瓦241 小时前
HTML与CSS核心概念详解
前端·笔记·html·javaweb