vue滑动tabber居中显示

1.html

<div class="scroll-title">
   <div class="list" ref="viewBox">
    <ul>
      <li :class="{'select-tab' : tabIndex == classIndex}" v-for="(classItem, classIndex) in productClassList" :key="classIndex" @click="typeClick(classItem.product_class_id, classIndex)">{{classItem.name}}</li>
    </ul>
   </div>
  <div class="line"></div>
  <div class="mine-course-wrap" @click="mineCourse()">我的课程</div>
</div>

2.初始化bar显示

let that = this;
setTimeout(()=> {
   that.$refs.viewBox.scrollLeft = that.$refs.viewBox.scrollWidth / this.productClassList.length * (that.tabIndex - 1);
}, 500);
this.$refs.viewBox.addEventListener('scroll', this.scroll);

3.点击事件

scroll() {
   this.scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
},
// 点击type
typeClick(e, index) {
  this.tabIndex = index;
  store.set({'tab_index': this.tabIndex})
  this.productClassId = e;
  this.getProductListFun(this.productClassId)
  if (index == 0 || index == 1) {
    this.$refs.viewBox.scrollLeft = 0;
  }
  if (index >= 2) {
    this.$refs.viewBox.scrollLeft = this.$refs.viewBox.scrollWidth / this.productClassList.length * (index - 1);
  } 
},

4.css

.scroll-title {
    width: 7rem;
    height: 0.8rem;
    padding: 0 0.25rem; 
    background-color: #FFFFFF;
    position: -webkit-sticky;
    position: sticky;
    top: 0.87rem;
    padding-bottom: 1px; 
    border-bottom: 0.01rem solid #ddd;
  }
  .list {
    width: 5.5rem;
    height: 0.8rem;
    overflow-x: scroll;
    overflow-y: hidden;
    float: left;
    box-sizing: border-box;
    -webkit-overflow-scrolling : touch;
    -ms-overflow-style: none;
    overflow: -moz-scrollbars-none; 
    padding-bottom: 0.9rem;
    ::-webkit-scrollbar { width: 0 !important }
    ul {
      font-size: 0.3rem;
      list-style: none;
      height: 0.8rem;
      line-height: 0.8rem;
      white-space: nowrap;
      li {
        padding: 0 0.2rem;
        display: inline-block;
      }
    }
  }