解决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;
相关推荐
万少11 小时前
我的HarmonyOS百宝箱
前端
江城开朗的豌豆11 小时前
uni-app弹层遮罩难题?看我如何见招拆招!
前端·javascript·微信小程序
江城开朗的豌豆11 小时前
小程序生命周期漫游指南:从诞生到落幕的完整旅程
前端·javascript·微信小程序
亿元程序员11 小时前
100个Cocos实例之双摇杆(57/100)
前端
Mike_jia11 小时前
Kaniko:无特权容器镜像构建的革命者
前端
欧阳码农11 小时前
忍了一年多,我做了一个工具将文章一键发布到多个平台
前端·人工智能·后端
Hy行者勇哥11 小时前
软件开发中前端页面、后台管理页面、后端、数据中台的关系与开发流程
前端
江城开朗的豌豆11 小时前
跨平台开发实战:我的小程序双端(iOS、安卓)开发指南
前端·javascript·微信小程序
IT_陈寒12 小时前
Python性能优化:5个让你的代码提速300%的NumPy高级技巧
前端·人工智能·后端
艾小码12 小时前
前端路由的秘密:手写一个迷你路由,看懂Hash和History的较量
前端·javascript