Element UI中el-dialog中内容超出自定义滚动条

发与少年

已于 2022-03-13 22:08:49 修改

阅读量1.1w

点赞数 23

分类专栏：前端文章标签： ui elementui vue.js

于 2022-03-13 22:06:32 首次发布

本文链接：https://blog.csdn.net/weixin_58206564/article/details/123467131

版权

前端专栏收录该内容

38 篇文章 3 订阅

订阅专栏

本文介绍了如何在项目需求中为dialog弹框添加滚动条，通过嵌套div并设置高度及overflow属性，同时自定义滚动条样式。提供了Sass和原生CSS代码示例，适用于前端开发者进行对话框设计和布局调整。

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

1、项目需求中,需要dialog弹框内容超出后,显示滚动条,如下图所示:

2、采取方案：

2.1 dialog中嵌套div，给div设置高度，并且overflow属性为auto，布局如下图：

3、代码样式代码片段

3.1sass或less写法

 .sketch_content {
// 必须有高度 overflow 为自动
    overflow: auto;
    height: 434px;
    border-top: 1px solid #eff1f4;
    border-bottom: 1px solid #eff1f4;
    padding: 0px 30px 11px 27px;

// 滚动条的样式,宽高分别对应横竖滚动条的尺寸
    &::-webkit-scrollbar {
      width: 3px;
    }

// 滚动条里面默认的小方块,自定义样式
    &::-webkit-scrollbar-thumb {
      background: #8798AF;
      border-radius: 2px;
    }

// 滚动条里面的轨道
    &::-webkit-scrollbar-track {
      background: transparent;
    }
}

3.2 原生写法

   .sketch_content {
// 必须有高度 overflow 为自动
    overflow: auto;
    height: 434px;
    border-top: 1px solid #eff1f4;
    border-bottom: 1px solid #eff1f4;
    padding: 0px 30px 11px 27px;
    }

// 滚动条的样式,宽高分别对应横竖滚动条的尺寸
    .sketch_content::-webkit-scrollbar {
      width: 3px;
    }

// 滚动条里面默认的小方块,自定义样式
    .sketch_content::-webkit-scrollbar-thumb {
      background: #8798AF;
      border-radius: 2px;
    }

// 滚动条里面的轨道
    .sketch_content::-webkit-scrollbar-track {
      background: transparent;
    }