解决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;
相关推荐
css趣多多14 分钟前
vue3的组件间通信ref子组件需要把父组件要的ref数据开放
前端·javascript·vue.js
我是伪码农26 分钟前
Vue 2.10
前端·javascript·vue.js
AAA阿giao34 分钟前
React 性能优化双子星:深入、全面解析 useMemo 与 useCallback
前端·javascript·react.js
不想秃头的程序员38 分钟前
父传子全解析:从基础到实战,新手也能零踩坑
前端·vue.js·面试
大时光40 分钟前
gsap 配置解读 --5
前端
Wect41 分钟前
LeetCode 25. K个一组翻转链表:两种解法详解+避坑指南
前端·算法·typescript
shadowingszy41 分钟前
【前端趋势调查系列】带你看看前端生态圈的技术趋势state-of-js 2025详细解读
前端·javascript·vue.js
@菜菜_达1 小时前
CSS是什么?
前端·css
2301_796512521 小时前
【精通篇】打造React Native鸿蒙跨平台开发高级复合组件库开发系列:Sticky 粘性布局(始终会固定在屏幕顶部)
javascript·react native·react.js·ecmascript·harmonyos
Amumu121381 小时前
CSS基础选择器
前端·css