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

这篇具有很好参考价值的文章主要介绍了Element UI中el-dialog中内容超出自定义滚动条。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

elementui 元素超出范围设置滚动条,前端,ui,elementui,vue.js

2、采取方案：

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

elementui 元素超出范围设置滚动条,前端,ui,elementui,vue.js 文章来源地址https://www.toymoban.com/news/detail-615973.html

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

到了这里，关于Element UI中el-dialog中内容超出自定义滚动条的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！