Vue - 关于el-dialog 会让body 标签内的滚动条隐藏，导致窗口抖动的问题和双滚动条问题

沐修

已于 2023-08-30 14:12:11 修改

阅读量3.4k

点赞数 5

分类专栏： Vue 文章标签： vue.js elementui javascript 经验分享

于 2023-06-15 14:06:32 首次发布

本文链接：https://blog.csdn.net/qq_42701659/article/details/131225036

版权

Vue 专栏收录该内容

38 篇文章 3 订阅

订阅专栏

文章主要介绍了在使用Element-UI的el-dialog组件时遇到的body滚动条隐藏导致窗口抖动以及双滚动条问题。通过设置`:lock-scroll`和`:append-to-body`属性为`false`可以解决抖动问题，而添加CSS样式如`overflow-y:scroll!important`和调整布局可以消除双滚动条。解决方案还引用了相关的参考链接。

摘要由CSDN通过智能技术生成

问题：

关于el-dialog 会让body 标签内的滚动条隐藏，导致窗口抖动的问题

抖动问题

抖动问题就不演示了，很简单，按如下配置就能解决：
在这里插入图片描述

双滚动条问题演示：

在这里插入图片描述

双滚动条解决效果演示：

在这里插入图片描述

解决方法：

笔者在这里解决这两种问题的解决方法如下：（注意笔者这里是两个问题一起先后出现的）

1、解决窗口抖动问题

<el-dialog
  :title="formTitle"
  :visible.sync="dialogFormVisible"
  :lock-scroll="false"  //主要是这个属性
  :append-to-body="true"   //跟这个属性
  :close-on-click-modal="false"
>
</el-dialog>

2、解决双滚动条问题

overflow-y: scroll !important; //主要是这个属性

.el-dialog {
  display: flex !important;
  flex-direction: column !important;
  margin: 0 !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  overflow-y: scroll !important;
  max-height: 99vh !important;
}