【Element-UI的隐藏组件】自

el-scroll-bar.gif
官网效果
无意间发现element官网有这么一个滚动条效果，之前在一个需求上想做这样的效果，碍于当时脑筋短路没实现。感觉像是通过active或者focus触发显示滚动条，查看html后发现确实是通过active出触发。且它这样式很规整，就怀疑是不是有写好的组件。
查看了element代码后发现确实有这么个组件，只是没有在官网API上声明，目前发现只是在el-select下拉框中内部使用。

简单分享下该组件用法和参数

基础用法

<el-scrollbar style="height:100px;" :wrapStyle="[{'overflow-x':'hidden'}]">
  ...内容...
</el-scrollbar>

使用该组件的时候需要给其一个高度，它毕竟是滚动条组件，高度是对它最起码的尊重。组件默认overflow为：scroll，如果需要去掉横向滚动条可以设置overflow-x样式。

Attribute

参数	说明	类型	可选值	默认值
native	是否使用原生滚动条样式	boolean	—	false
wrapStyle	wrap层style	Array/String	—	—
wrapClass	wrap层class	String	—	—
viewStyle	view层style	Array/String	—	—
viewClass	view层class	String	—	—
noresize	是否添加resize监听	boolean	—	false
tag	view层html标签	String	—	div

html

<div class="el-scrollbar" style="height: 100px;">
  <div class="el-scrollbar__wrap" style="margin-bottom: -17px; margin-right: -17px;">
    <div class="el-scrollbar__view">
      ...内容...
    </div>
  </div>
  <!-- element垂直滚动条 native 为 true 时不出现 -->
  <div class="el-scrollbar__bar is-horizontal">
    <div class="el-scrollbar__thumb" style="transform: translateX(0%);"></div>
  </div>
  <!-- element水平滚动条 native 为 true 时不出现 -->
  <div class="el-scrollbar__bar is-vertical">
    <div class="el-scrollbar__thumb" style="height: 35.4701%; transform: translateY(0%);"></div>
  </div>
</div>