vue中控制滚动条移动

业务要求，tab切换栏宽度固定，长了的话加滚动条，要求通过点击事件控制左右移动

目前想到的是控制滚动条移动就行了，

使用scrollTo方法,

 <div class="layout" id="out">
     <div class="b">标题1</div>
      <div class="b">标题2</div>
      <div class="b">标题3</div>
      <div class="b">标题4</div>
      <div class="b">标题5</div>
      <div class="b">标题6</div>
      <div class="b">标题7</div>
      <div class="b">标题8</div>
    </div>
    <div id="addd" @click="toleft()">
      向左
    </div>
    <div id="addddd" @click="toright()">
      向右
    </div>

toright() {
      let outDiv = document.getElementById("out");
      this.scrollLeft += this.step;
      outDiv.scrollTo(this.scrollLeft, 0);
    },
    toleft() {
      let outDiv = document.getElementById("out");
      this.scrollLeft -= this.step;
      outDiv.scrollTo(this.scrollLeft, 0);
    },

.layout {
  width: 200px;
  height: 50px;
  display: flex;
  overflow-x: auto;
}
.b {
  width: 100px;
  padding: 0 24px;
  height: 50px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  background: red;
  color: #ffffff;
  white-space: nowrap;
}