elementui组件—— el-scroll的使用

项目开发中使用到了elementui组件，后期发现浏览器中的滚动条不仅占宽，还与页面暗色风格不搭配。于是打算寻找一款插件使用，而elementui中的scroll组件刚好满足需要而且兼容ie10+。

官网侧边栏中scroll的使用截图

使用方法

直接在页面中调用el-scroll组件

       
      
 占位

页面内渲染出的dom结构可以看出，组件内总共有三块内容

1. 最外层：el-scrollbar。使用时需要指定高度和宽度
2. 第一块代码：el-scroll__wrap：
   1).overflow:scroll是写在这里的，通过margin为负，将浏览器中的原始滚动条排除视觉内隐藏掉。
   2).el-scroll__view包裹滚动区域
3. 第二块代码：el-scroll__bar is-horizontal: 横向滚动条
4. 第三块代码：el-scroll__bar is-vertical: 纵向滚动条

组件的自定义属性

根据官网的scroll组件源码，可以看到scroll组件是有几个属性可以传入的。具体使用可以自己研究下，主要就是传入自定义样式和class，注意自定义stlye接收的是数组类型。

举栗子：