组件el-scrollbar的使用

对于elementui里面的scrollbar组件，一直没有一个清晰的使用方法，似乎每次使用需要的代码都不同，需要加各种乱七八糟的样式加穿透样式，今天自己测试了下，似乎并没有想象的复杂。

1.最简单的使用

<template>
  <div>
    <el-scrollbar>
      <div class="box">
        <ul>
          <li v-for="item in 100">{
   { item }}</li>
        </ul>
      </div>
    </el-scrollbar>
  </div>
</template>

直接使用el-scrollbar的组件将你需要的有滚动条的内容包裹起来即可。这里必须设置里面盒子的固定高度（最好是设置最大高度），不然不会有效果！若内容长度不超出屏幕宽度，则不会出现横向滚动条。

.box {
    
  max-height: 200px;
}

效果展示

2.设置宽度
我们也可以直接设置el-scrollbar的组件宽度，这样超出宽度的时候自然就会出现横向滚动条。

注意是给el-scrollbar组件设置宽度，而不是里面的内容设置。

此时可以直接给el-scrollbar组件添加class即可

<template>
  <div>
    <el-scrollbar class="scrollbar">
      <div class="box">
        <ul>
          <li v-for="item in 100">{
   { item }}{
   { item }}{
   { item }}{
   { item }}{
   { item }}{
   { item }}{
   { item }}{
   { item }}{
   { item }}{
   { item }}{
   { item }}{
   { item }}{
   { item }}{
   { item }}{
   { item }}{
   { item }}{
   { item }}{
   { item }}{
   { item }}{
   { item }}</li>
        </ul>
      </div>
    </el-scrollbar>
  </div>
</template>

.box {
    
  max-height: 200px;
}
.scrollbar {
    
  width: 200px;
}

当宽度超出长度但是还不想显示滚动条时，添加以下样式即可

/deep/ .is-horizontal {
    
  display: none;
}