el-dialog中内容自定义滚动条

简介: el-dialog中内容自定义滚动条

上代码

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

 

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


相关文章
|
前端开发
饿了么el-dialog自定义内容以及el-dialog自定义样式
饿了么el-dialog自定义内容以及el-dialog自定义样式
472 0
element 下拉菜单el-dropdown如何更改样式?
element 下拉菜单el-dropdown如何更改样式?
959 0
vant中Dialog的使用,如何修改Message字号大小
vant中Dialog的使用,如何修改Message字号大小
vant中Dialog的使用,如何修改Message字号大小
Element el-button 按钮组件详解
本文目录 1. 背景 2. 按钮分类 3. 按钮样式 4. 按钮状态 5. 按钮分组 6. 按钮尺寸 7. 小结
2885 0
Element el-button 按钮组件详解
elementui中el-checkbox 选中时的详细介绍
elementui中el-checkbox 选中时的详细介绍
element-ui框架的el-dialog弹出框被遮罩层挡住了/el-drawer....会生成v-model元素的组件被遮罩层挡住
element-ui框架的el-dialog弹出框被遮罩层挡住了/el-drawer....会生成v-model元素的组件被遮罩层挡住
418 1
|
JavaScript
elementUI封装 el-dialog
elementUI封装 el-dialog
elementUI封装 el-dialog
element-ui框架的el-dialog弹出框被遮罩层遮挡问题
element-ui框架的el-dialog弹出框被遮罩层遮挡问题
548 0
|
JavaScript
element-ui 的表格里面使用 el-popover 实现编辑弹层功能
element-ui 的表格里面使用 el-popover 实现编辑弹层功能
906 0
element-ui 的表格里面使用 el-popover 实现编辑弹层功能
element-ui:多个el-dialog弹框切换会出现闪烁
element-ui:多个el-dialog弹框切换会出现闪烁
306 0