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

骑猪看日落 2024-03-16 18:32 54阅读 0赞

## 问题： ##

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

### 抖动问题 ###

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

### 双滚动条问题演示： ###

![在这里插入图片描述][b2662271eea046e2b41026022a61ce15.png]

双滚动条解决效果演示：

![在这里插入图片描述][3d0e805088464f6885909173bef2455e.png]

## 解决方法： ##

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

### 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;
    }

--------------------

## 参考链接 ##

[1. Element-UI模态框会话框弹框dialog出现滚动条，再次点击无法置顶滚动条的解决方法][1. Element-UI_dialog]

[2. ialog弹出，点确定，页面隐藏滚动条，导致页面和message弹框抖动][2. ialog_message]

[3. element-plus：el-Dialog对话框组件垂直居中、禁止屏幕滚动、使用内滚动][3. element-plus_el-Dialog]

[5dd33d969a3d4f25a0ea9977b988fc39.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/3cf3fb5db9c04f35a1791b6d53c095d3.png
[b2662271eea046e2b41026022a61ce15.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/e5c22aa2eb3a4523b8c6aaa5fb191e98.png
[3d0e805088464f6885909173bef2455e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/9e2811daca27411cb5f1a35931485bd3.png
[1. Element-UI_dialog]: https://www.ycmbcd.com/blog/html/16261745302376.html
[2. ialog_message]: https://blog.csdn.net/qq_37418556/article/details/114655142
[3. element-plus_el-Dialog]: https://blog.csdn.net/m0_58050016/article/details/128114632?spm=1001.2101.3001.6650.1&utm_medium=distribute.pc_relevant.none-task-blog-2~default~CTRLIST~Rate-1-128114632-blog-108383214.235%5Ev38%5Epc_relevant_default_base&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2~default~CTRLIST~Rate-1-128114632-blog-108383214.235%5Ev38%5Epc_relevant_default_base&utm_relevant_index=2