elementUI的el-scrollbar

概念

el-scrollbar(滚动条组件)：是Element UI隐藏组件

注意事项：

1.el-scrollbar的父层要有固定高度

2.el-scrollbar的高度要设成100%

3.如果出现横滚动条，添加overflow-x:hidden;

属性

el-scrollbar组件暴露了 native, wrapStyle, wrapClass, viewClass, viewStyle, noresize, tag 这7个 props属性

props: {
    native: Boolean,  // 是否使用本地，设为true则不会启用element-ui自定义的滚动条
    wrapStyle: {},  // 包裹层自定义样式
    wrapClass: {},  // 包裹层自定义样式类
    viewClass: {},  // 可滚动部分自定义样式类
    viewStyle: {},  // 可滚动部分自定义样式
    noresize: Boolean, // 如果 container 尺寸不会发生变化，最好设置它可以优化性能
    tag: {  // 生成的标签类型，默认使用 `div`标签包裹
      type: String,
      default: 'div'
    }
}

例

<el-scrollbar 
      wrap-class="list" wrap-style="overflow-x:hidden;" 
      view-class="view-box" view-style="font-weight: bold;height:100%;" 
      :native="false">
        <el-tree
          class="tree"
          :data="menuItems"
          node-key="id"
          :default-expanded-keys="expandedKeys"
          :default-checked-keys="checkedKeys"
          :props="defaultProps"
          :expand-on-click-node="false"
          :render-content="renderContent"
        >
        </el-tree>
</el-scrollbar>

源码

源码在node_modules 目录下的 element-ui/packages/scrollbar

参考链接：https://shentuzhigang.blog.csdn.net/article/details/105150901