elementUI自定义滚动条组件el-scrollbar

最近做项目适合发现的一个文档没有但是挺好用的滚动条组件

使用

// 使用
<el-scrollbar wrap-class="scrollbar-wrapper"></el-scrollbar>



// 传入的属性
props: {
  native: Boolean,    //  是否使用原生滚动条，即不附加自定义滚动条
  wrapStyle: {},      //  wrap的内联样式
  wrapClass: {},      //  wrap的样式名
  viewClass: {},      //  view的样式名
  viewStyle: {},      //  view的内联样式
  noresize: Boolean,  //  当container尺寸发生变化时，自动更新滚动条组件的状态
  tag: {              //  组件最外层的标签属性，默认为 div
    type: String,
    default: 'div'
  }

结构

使用自定义标签 el-scrollbar 裹住使用的区域，scrollbar 组件会生成 view 和 wrap 两个父级元素包裹插槽中的内容，还有两种类型的自定义滚动条 horizontal 和 vertical。

最后根据自己需要设置下样式就好

.el-scrollbar {
      height: 100%;
    }
.scrollbar-wrapper {
      overflow-x: hidden !important;
    }
  .el-scrollbar__view{
      height: 200px;
  }

鼠标移入就会显示滚动条了