vue elmentUi el-scrollbar 美化滾動條樣式

<template>
  <div class="home reset">
    <!-- bind your configurations -->
    <div class="scroll">
      <el-scrollbar>
        <!--如下是滾動的內容-->
        <ul id="app">
          <li v-for="item in items" @click="toggle(item)">
            <span v-show="item.show">{{item.content}}</span>
          </li>
        </ul>
      </el-scrollbar>
    </div>
  </div>
</template>

樣式：

.scroll {
  height: 100px;
  overflow-y: hidden;
}

.el-scrollbar{
  height: 100%;
}
.el-scrollbar__bar{
  &.is-vertical{
    width:100px;//滾動條寬度
  }
}
.el-scrollbar__wrap{
  overflow-y: auto;
  overflow-x:hidden;
}
.el-scrollbar__thumb {
  ////可設置滾動條顏色
  background: url("../../assets/logo.png");
}


展現效果：

 注：特別注意select下拉的滾動條是否受影響