el-scrollbar:Element UI隐藏组件。

注意事项:

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

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

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

问题分析 

通过阅读源码,scrollbar组件暴露了 nativewrapStylewrapClassviewClassviewStylenoresizetag 这7个 props属性 


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

注: wrapStyle和viewStyle必须以分号;结尾。

代码示例

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