js控制滚动条带动画滚动

image.png

<template>
  <div>
    <div id="nav_scroll_tabs">
      <el-tag type="info">111111</el-tag>
      <el-tag type="info">22</el-tag>
      <el-tag type="info">333333333333333333</el-tag>
      <el-tag type="info">44444</el-tag>
      <el-tag type="info">55555</el-tag>
      <el-tag type="info">66666666666</el-tag>
      <el-tag type="info">777</el-tag>
      <el-tag type="info">8888888888888888888</el-tag>
      <el-tag type="info">99999999999</el-tag>
      <el-tag type="info">aaaaaaaaaaaaaaaaaaaa</el-tag>
      <el-tag type="info">bbbbbbbbbbbbbbbbb</el-tag>
      <el-tag type="info">cccccccccccccccc</el-tag>
      <el-tag type="info">ddddddddddd</el-tag>
      <el-tag type="info">eeeeeeeeeeeeeeeeeeee</el-tag>
      <el-tag type="info">fffffffff</el-tag>
    </div>
    <el-button @click="btnC('l')">&lt;</el-button>
    <el-button @click="btnC('r')">&gt;</el-button>
  </div>
</template>

  methods: {
    btnC(type) {
      const nav = document.getElementById('nav_scroll_tabs')
      const scrollLeft = nav.scrollLeft
      const num = type === 'l' ? -50 : 50
      nav.scrollTo({
        left: scrollLeft + num,
        behavior: 'smooth'
      })
      console.log(123,nav.scrollLeft)
    }
  },

<style>
#nav_scroll_tabs{
  white-space: nowrap;
  overflow-x: auto;
}
</style>