el-scrollbar 手动控制滚动条以及判断是否可滚动

<script>
export default {
  name: "GroupList",
  data(){
    return {
      canScrollLeft: false,
      canScrollRight: false,
    }
  },
  mounted() {
    this.$refs.scrollbarRef.wrap.addEventListener('scroll',this.updateBtnStatus)
    this.updateBtnStatus()
  },
  methods:{
    updateBtnStatus(){
      const wrap = this.$refs.scrollbarRef.wrap
          // wrap.scrollLeft 表示当前滚动条的水平滚动位置,如果大于 0 则说明可以向左滚动。
      this.canScrollLeft = wrap.scrollLeft > 0 // 左边是否可以滚动
      /**
       * scrollWidth 表示滚动内容的总宽度。
       * clientWidth 表示滚动容器的可视宽度 也就是用户在页面上能看到的宽度。
       * scrollLeft 表示当前滚动条的水平滚动位置。
       * 当 wrap.scrollWidth 大于 wrap.clientWidth + wrap.scrollLeft 时,
       * 说明实际内容的宽度大于用户当前能看到的宽度。也就是说,还有一部分内容是被隐藏的,需要向右滚动才能看到。
       */
      // 举个例子来说明:
      //
      //     如果 wrap.scrollWidth = 500px，表示实际内容的宽度是 500px
      // 如果 wrap.clientWidth = 300px，表示用户当前能看到的宽度是 300px
      // 如果 wrap.scrollLeft = 100px，表示用户当前看到的内容从 100px 开始
      // 此时，wrap.scrollWidth (500px) > wrap.clientWidth (300px) + wrap.scrollLeft (100px)，说明还有 100px 的内容是被隐藏的,需要向右滚动才能看到。
      this.canScrollRight = wrap.scrollWidth > wrap.clientWidth + wrap.scrollLeft
    },
    handleToLeft(val){
      if(!this.$refs.scrollbarRef) return
      this.$refs.scrollbarRef.wrap.scrollLeft += val
    }
  }
}
</script>

<template>
  <div class="group-list">
    <div class="left-icon" :class="{'active':canScrollLeft}" @click="handleToLeft(-30)">
      <i class="el-icon-arrow-left" />
    </div>
    <el-scrollbar ref="scrollbarRef">
      <ul class="list">
        <li v-for="item in 30" :key="item" class="group-item">
          <div class="name">{{ `分组${item}` }}</div>
          <i class="el-icon-error"></i>
        </li>
      </ul>
    </el-scrollbar>
    <el-button class="search-btn" type="primary">添加</el-button>
    <div class="right-icon" :class="{'active':canScrollRight}" @click="handleToLeft(30)">
      <i class="el-icon-arrow-right"/>
    </div>
  </div>
</template>

<style scoped>
.is-vertical {
  display: none;
}
</style>
<style lang="scss" scoped>
.group-list {
  width: 100%;
  height: 50px;
  background-color: #fff;
  border-radius: 5px;
  margin-bottom: 8px;
  padding: 0 8px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  .active {
    background-color: #3274c7!important;
  }
  .left-icon {
    margin-right: 8px;
  }
  .left-icon,.right-icon {
    color: white;
    cursor: pointer;
    width: 15px;
    height: 15px;
    line-height: 15px;
    border-radius: 15px;
    background-color: #c0c5cb;
    font-size: 13px;
  }
  .search-btn {
    margin: 0 8px;
  }
  .el-scrollbar {
    .list {
      padding: 0;
      display: flex;
    }
    .group-item {
      list-style: none;
      display: flex;
      justify-content: space-around;
      align-items: center;
      height: 30px;
      box-sizing: border-box;
      border:1px solid #ccc;
      margin-right: 5px;
      padding: 0 5px;
      .name{
        width: 60px;
        font-size: 13px;
        .el-icon-error {
          cursor: pointer;
        }
      }
    }
  }
}

</style>