el-dialog 弹窗弹出，导致两个滚动条，影响用户体验

最胖的小仙女

已于 2022-08-17 11:55:10 修改

阅读量6.1k

点赞数 2

分类专栏： element UI 前端 css学习文章标签： html 前端 javascript

于 2021-06-21 23:42:49 首次发布

本文链接：https://blog.csdn.net/weixin_39418338/article/details/118097052

版权

element UI 同时被 3 个专栏收录

8 篇文章 0 订阅

订阅专栏

前端

6 篇文章 0 订阅

订阅专栏

css学习

6 篇文章 0 订阅

订阅专栏

el-dialog 弹窗弹出，导致页面有两个滚动条，el-dialog有一个，body也有一个，弹窗弹出需要把外面的滚动条隐藏掉，这样不会导致弹窗出来底层的页面还可以上下滚动，那怎么解决

网上有很多种方法，但是还是解决不了我的需求，重要的是在 body,html添加 overflow: hidden;和#app 添加 height: 100%; overflow: auto;

1、静态写法

body,html{

  width:100%;

  height:100%;

  margin:0;

  padding:0;

  overflow: hidden;

}

#app {

  height: 100%;

  overflow: auto;

}

2、js动态写法

// 类样式
.el-popup-parent--hidden {
    overflow: hidden;
}

// 打开弹窗的时候，添加类名
document.querySelector('body').classList.add('el-popup-parent--hidden')

// 关闭弹窗的时候，移除类名
document.querySelector('body').classList.remove('el-popup-parent--hidden')

您的点赞、关注、评论加收藏，就是我每天更新笔记的动力，谢谢！希望对您有所帮助~