当前位置: 首页 > news >正文

解决el-dialog弹出时,页面抖动,右侧会缩小的问题(即滚动条被遮罩层覆盖的问题)

问题描述:

在弹出el-dialog时,会发现弹出框弹出时,页面会抖动,滚动条被遮罩层覆盖直接没有滚动条了,导致页面缩小了几个像素点(滚动条的宽度);体验感不好,会影响到页面的布局,且页面有的fixed定位的内容也会随着遮罩层的出现移动几个像素点;
后来我找了一下页面具体样式变化,发现弹框在出现时,会对页面的滚动条进行处理,给body增加额外的样式类;可以找到样式类重写,方法1,但是容易影响页面整体不急,不推荐。更直接的办法参考 方法2,直接不让遮罩层罩盖滚动条,滚动条正常展示,但是这样的话即使有遮罩层用户也能正常拉动滚动条;

解决方法:

方法1

  1. 在全局设置 body 的 padding-right: 0 !important;不推荐,虽然可以解决问题,但是影响了页面的布局效果;

方法2

  1. main.js中,找到引入element的地方,举个例子
import Element from "element-ui";
import "element-ui/lib/theme-chalk/index.css";Element.Dialog.props.lockScroll.default = false;
http://www.lryc.cn/news/109031.html

相关文章:

  • 【Rust 基础篇】Rust 属性宏:定制你的代码
  • 2023-08-04力扣今日三题
  • 从HTTP代理到Socks5代理:网络安全与爬虫的进化之路
  • 数学建模-元胞自动机
  • 化学合成有机化学 | 逆合成分析软件/数据库汇总
  • 无涯教程-jQuery - Selectable选择函数
  • MySQL修改root密码
  • vue获取近七天、月份、年份的起始日和结束日
  • android AIDL 学习使用
  • 学习笔记|C251|STC32G单片机视频开发教程(冲哥)|第三集:开发环境搭建和程序下载
  • 【数据可视化】(二)数据探索组件
  • Go to Play Maimai DX 2023牛客暑期多校训练营5 G
  • HTML基础铺垫
  • 【Vue3项目实战】vue3项目基于el-menu封装左侧菜单栏组件
  • MySQL正则表达式检索数据
  • vite+ts+vue3 prettier.config.js 不生效问题解决
  • Java源码规则引擎:jvs-rules 8月新增功能介绍
  • 2023年第三届工业自动化、机器人与控制工程国际会议 | IET独立出版 | EI检索
  • 14.2.2 【Linux】software, hardware RAID
  • (学习笔记-进程管理)进程
  • 《Linux从练气到飞升》No.07 Linux第一个小程序-进度条的实现
  • 【NLP概念源和流】 04-过度到RNN(第 4/20 部分)
  • 企业上云实施路线图
  • docker系列--解决hyper-v导致docker无法启动问题
  • socket server服务器开发常见的并发模型
  • 怎么修改pdf文件中的文字?分享几种编辑方法
  • spring — Spring Security 5.7与6.0差异性对比
  • 道本科技受邀参加建筑产业互联网推动建筑产业现代化体系构建座谈会,以数字化产品为建筑行业注入新动能!
  • 数据结构----效率问题
  • 【BASH】回顾与知识点梳理(五)