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>
