点击按钮控制滚动条滚动

<div class="tags">
	// 左侧按钮
    <el-link :underline="false" @click="leftClick" :disabled="showLeftIcon">
      <div class="backColor" style="float:left;margin: 8px 0">
        <i class="el-icon-arrow-left" />
      </div>
    </el-link>
    //滚动内容
    <div id="tags-view-container" class="tags-view-container">
      <scroll-pane ref="scrollPane" class="tags-view-wrapper" @scroll="handleScroll">
        <router-link v-for="tag in visitedViews" ref="tag" :key="tag.path" :class="isActive(tag) ? 'active' : ''"
          :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }" tag="span" class="tags-view-item"
          :style="activeStyle(tag)" @click.middle.native="!isAffix(tag) ? closeSelectedTag(tag) : ''"
          @contextmenu.prevent.native="openMenu(tag, $event)">
          {{ tag.title }}
          <span style="float: right;line-height: 20px" v-if="!isAffix(tag)" class="el-icon-close"
            @click.prevent.stop="closeSelectedTag(tag)" />
        </router-link>
      </scroll-pane>
      <ul v-show="visible" :style="{ left: left + 'px', top: top + 'px' }" class="contextmenu">
        <li @click="refreshSelectedTag(selectedTag)"><i class="el-icon-refresh-right"></i> 刷新页面</li>
        <li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)"><i class="el-icon-close"></i> 关闭当前</li>
        <li @click="closeOthersTags"><i class="el-icon-circle-close"></i> 关闭其他</li>
        <li v-if="!isFirstView()" @click="closeLeftTags"><i class="el-icon-back"></i> 关闭左侧</li>
        <li v-if="!isLastView()" @click="closeRightTags"><i class="el-icon-right"></i> 关闭右侧</li>
        <li @click="closeAllTags(selectedTag)"><i class="el-icon-circle-close"></i> 全部关闭</li>
      </ul>
    </div>
    //右侧按钮
    <el-link :underline="false" @click="rightClick" :disabled="showRightIcon">
      <div class="backColor" style="float:right;margin: 8px 0">
        <i class="el-icon-arrow-right" />
      </div>
    </el-link>
  </div>
	//js部分
	export default {
  components: { ScrollPane },
  data() {
    return {
      showLeftIcon: true,
      showRightIcon: false,
      maxClickNum: 0, // 最大点击次数
      lastLeft: 0, // 上次滑动距离
      clickNum: 0, // 点击次数
    }
  },
  methods: {
    // 点击右箭头
    rightClick() {
      // 如果点击次数小于数组长度-1时，执行左滑动效果。
      if (this.clickNum < this.visitedViews.length - 1) {
        // 获取当前元素宽度+右边距
        let width = document.querySelectorAll('.tags-view-item')[this.clickNum].offsetWidth + 10
        // 获取最后一个元素距离左侧的距离+元素本身的宽度
        let lastItemOffsetLeft = document.getElementsByClassName('tags-view-item')[this.visitedViews.length - 1].offsetLeft + width
        // 获取可视区域宽度
        const lookWidth = document.getElementsByClassName('tags-view-wrapper')[0].clientWidth
        // 计算可视化区域和最后一个元素的距离之间的差值
        const value = lookWidth - lastItemOffsetLeft
        // 如果最后一个元素距离左侧的距离大于可视区域的宽度，表示最后一个元素没有出现，执行滚动效果
        if (lastItemOffsetLeft > lookWidth) {
          if (value > -width && value < 0) {
            // 最后一次点击
            // 公示：滚动距离（元素的magin-left值） = 负的它自己的长度 + 上一次滑动的距离
            document.getElementsByClassName('tags-view-item')[0].style.marginLeft = `${value + this.lastLeft}px`
            this.lastLeft = value + this.lastLeft
            // 点击次数+1
            this.clickNum += 1
            // 记录到最后一个元素出现在可视区域时，点击次数的最大值。用于后面点击左侧箭头时判断右侧箭头的显示
            this.maxClickNum = this.clickNum
            //最后一次禁用右箭头
            this.showRightIcon = true
          }else{
            // 公示：滚动距离（元素的magin-left值） = 负的它自己的长度 + 上一次滑动的距离
            document.getElementsByClassName('tags-view-item')[0].style.marginLeft = `${-width + this.lastLeft}px`
            this.lastLeft = -width + this.lastLeft
            // 点击次数+1
            this.clickNum += 1
            // 记录到最后一个元素出现在可视区域时，点击次数的最大值。用于后面点击左侧箭头时判断右侧箭头的显示
            this.maxClickNum = this.clickNum
          }
          this.showLeftIcon = false
        }
      }
    },
    // 点击左箭头
    leftClick() {
      // 当点击次数大于0时才触发，这样当点击次数clickNum等于1的到时候，clickNum--等于0.根据计算属性的判断会隐藏掉左箭头
      if (this.clickNum > 0) {
        // 获取当前元素宽度
        let width = document.querySelectorAll('.tags-view-item')[this.clickNum - 1].offsetWidth + 10
        // 公示：滚动距离（元素的magin-left值） = 它自己的长度 + 上一次滑动的距离
        if (this.lastLeft > -width) {
          // 最后一次
          document.getElementsByClassName('tags-view-item')[0].style.marginLeft = `0px`
          this.lastLeft = 0
        }else{
          document.getElementsByClassName('tags-view-item')[0].style.marginLeft = `${this.lastLeft + width}px`
          this.lastLeft = width + this.lastLeft
        }
        // 点击次数-1
        this.clickNum --
        // 如果点击次数小于最大点击次数，说明最后一个元素已经不在可是区域内了，显示右箭头
        if (this.clickNum === 0) {
          this.showLeftIcon = true
        }
      }
      this.showRightIcon = false
    },
  }
}
</script>
// css部分
<style lang="scss" scoped>
//隐藏滚动条
::v-deep .el-scrollbar__bar.is-horizontal {
  height: 0px;
  left: 2px;
}
//最外层容器
.tags {
  display: flex;
  padding: 0 10px;
  background-color: #f8f8f8;
}
//按钮背景样式
.backColor {
  border: 1px solid #E6EDF9;
  border-radius: 2px;
  background-color: #fff;
  width: 26px;
  height: 26px;
  padding: 4px;
}
//滚动内容
.tags-view-container {
  width: 100%;
  overflow-x: auto;
  padding: 8px 10px;
  height: 42px;
  background: #F2F4F8;

  // box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
  .tags-view-wrapper {
    .tags-view-item {
      display: inline-block;
      position: relative;
      cursor: pointer;
      height: 26px;
      width: 130px;
      line-height: 26px;
      background: #FFFFFF;
      box-shadow: 0 2px 4px 0 #E4E8EF;
      border-radius: 2px;
      color: #242939;
      padding: 0 8px;
      font-size: 12px;
      margin-right: 10px;
      &:first-of-type {
        // margin-left: 15px;
      }

      &:last-of-type {
        // margin-right: 15px;
      }

      &.active {
        background-color: #FFFFFF !important;
        color: #006EFF !important;
        border-color: #006EFF !important;
      }
    }
  }
}
</style>