elementui组件—— el-scroll的使用

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

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

使用方法

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

<el-scrollbar style="height: 325px;width: 300px;">
      <!-- 具体要包裹的内容 --> 
      <div style="
		    width: 500px;
		    height: 370px;
		    line-height: 300px;
		    text-align: center;
		"> 占位</div>
</el-scrollbar>

页面内渲染出的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接收的是数组类型。

举栗子：

 <el-scroll
  :view-class="'the-view-class'" 
  :wrap-style="[{height:'300px'},{width:'300px'}]"
  :wrap-class="'the-wrap-class'">
 </el-scroll>