使用element-ui模拟Mac OS滚动条

      同样是滚动条，Mac上的就比Windows上的美观很多。但通过css修改滚动条样式，有很多局限，并且兼容性很差。通常情况下的解决方案是将默认滚动条隐藏，再通过样式模拟一个滚动条，并通过js计算滚动条的长度和位置。

      而如果在项目中对每个可能出现滚动条的div都模拟滚动条并计算位置，是很庞大的工程，所以出现了很多美化滚动条的组件。其实，在很多项目中引入的element-ui组件库中就有封装好的滚动条，只是在官网上并没有相关文档，所以可能被大部分同学忽略了。

      细心的同学可以发现，在element的select组件中，若下拉选项的内容过多，会出现滚动条，这里的滚动条样式就是模拟Mac Os系统的滚动条，如下图。

      在select组件的源码中，可以发现中间使用了<el-scrollbar>组件。

      在scrollbar的源码中，可以看到提供了以下几个配置项

props: {
    native: Boolean,
    wrapStyle: {},
    wrapClass: {},
    viewClass: {},
    viewStyle: {},
    noresize: Boolean, // 如果 container 尺寸不会发生变化，最好设置它可以优化性能
    tag: {
      type: String,
      default: 'div'
    }
}

      使用方法也很简单，只需将<el-scrollbar></el-scrollbar>作为容器，将可能出现滚动条的内容包裹起来即可。以下是一个简单的案例：

<el-scrollbar style="height:200px;">
    <ul style="height:100%">
        <li v-for="item in list">{{item.name}}</li>
    </ul>
</el-scrollbar>