elementUI中的隐藏组件el-scrollbar

细心的人儿都会发现elementUI官网的滚动条样式优美，但是elementUI中并未给出这个滚动条组件，打开调试页面发现用到了el-scrollbar。问一下度娘发现早就有前辈们发现了这个问题并给出了解决方案。下面就记录下来用法以备不时之需。

 

1、组件名称

<el-scrollbar></el-scrollbar>

 

2、默认样式修改

 ⚠️ 改变.el-scrollbar__wrap这个class的样式一定要仅改变指定想改变的滚动条，避免影响到其他组件中el-dropdown有滚动条的样式。

// 在common.css中添加
.el-scrollbar__wrap{
  overflow-x: hidden;
}

 

3、综合示例

 ⚠️ 在使用时要设置外层容器高度。并且要设置el-scrollbar 的高度为100%

<template>
  <div style="height:600px;">
    <el-scrollbar style="height:100%">
        <div style="width:700px;height:700px;border:solid;" >
          ....... blabla.....
        </div>
    </el-scrollbar>
  </div>
</template>

 

参考文章：https://www.cnblogs.com/xuejiangjun/p/8628158.html

源码地址：https://github.com/ElemeFE/element/blob/dev/packages/scrollbar/src/main.js