滚动监听动画和锚点匹配问题

<template>
<div>
  <header :style="{background:all.window.navigationBarBackgroundColor}" v-if="all.ext.attr.searchEnable">
    <p @click="search">
      <i class="iconfont icon" style="font-size: 0.3rem">&#xe603;</i>
      <span>搜索商品</span>
    </p>
  </header>
  <!-- tab-container -->
  <div class="content">
    <ul class="sort_left" @click="select">
      <li v-for="(item,key) in sortsList" @click="jump(key)">{{item.name}}</li>
    </ul>
    <div class="sort_right" ref="rightList">
      <div v-for="(item,key) in sortsList"  class="cate_item">
        <p class="title">- {{item.name}} -</p>
        <ul>
          <li v-for="list in item.goods">
            <img :src="list.pic" alt="" style=" 42vw;max-height: 100%">
            <p style="margin-top: 0.25rem">{{list.name}}</p>
            <p>¥{{list.price}}</p>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>
</template>
<script>
export default{
    data(){
        return {
          color:"blue",
          isActive:'',
          itemVal:[],
          container:[]
        }
    },
  methods:{
    search(){

    },
    select(){
      const lis = document.getElementsByClassName('sort_left')[0].getElementsByTagName('li');
       let arr = Array.from(lis);
      arr.forEach(item => {
        item.style.color = 'black';
        item.className = '';
        item.style.borderLeftColor = 'white';
      });
      event.target.className = 'active';
      event.target.style.color = this.all.window.navigationBarBackgroundColor;
      event.target.style.borderLeftColor = this.all.window.navigationBarBackgroundColor;
    },
    jump(index){
      const anchor = document.querySelectorAll('.cate_item');
      let total = anchor[index].offsetTop - anchor[0].offsetTop;
      let distance = this.$refs.rightList.scrollTop;
      let _this = this;
      let step = total / 50;
      this.isActive = index;
      if (total > distance) {
        smoothDown()
      } else {
        let newTotal = distance - total;
        step = newTotal / 50;
        smoothUp()
      }
      function smoothDown () {
        if (distance < total) {
          distance += step;
          _this.$refs.rightList.scrollTop = distance;
          setTimeout(smoothDown, 10);
        } else {
          _this.$refs.rightList.scrollTop = total
        }
      }
      function smoothUp () {
        if (distance > total) {
          distance -= step;
          _this.$refs.rightList.scrollTop = distance;
          setTimeout(smoothUp, 10)
        } else {
          _this.$refs.rightList.scrollTop = total
        }
      }
    },
    onScroll(){
        let top = this.$refs.rightList.scrollTop;
        let _this = this;
        this.itemVal.forEach(function(obj, i){
        if(top >= obj.top && top < (obj.top + obj.height - 10)){
          // scrollTop的移动位置要在类别的菜品列表中才显示对应锚点的当前状态
          const lis = document.getElementsByClassName('sort_left')[0].getElementsByTagName('li');
          let arr = Array.from(lis);
          arr.forEach(item => {
            item.style.color = 'black';
            item.className = '';
            item.style.borderLeftColor = 'white';
          });
          arr[obj.index].className = 'active';
          arr[obj.index].style.color = _this.all.window.navigationBarBackgroundColor;
          arr[obj.index].style.borderLeftColor = _this.all.window.navigationBarBackgroundColor;
          }
        });
    },
//   改变状态
    changeState(index){
      const lis = document.getElementsByClassName('sort_left')[0].getElementsByTagName('li');
      let arr = Array.from(lis);
      arr.forEach(item => {
        item.style.color = 'black';
        item.className = '';
        item.style.borderLeftColor = 'white';
      });
      lis[index].className = 'active';
      lis[index].style.color = this.all.window.navigationBarBackgroundColor;
      lis[index].style.borderLeftColor = this.all.window.navigationBarBackgroundColor;
    }
  },
  computed:{
    all () {
      return this.$store.getters.getAll;
    },
    sortsList () {
      return this.$store.getters.getSortsGoods;
    },
  },
  mounted () {
    const lis = document.getElementsByClassName('sort_left')[0].getElementsByTagName('li');
    if(lis !== undefined){
      lis[0].className = 'active';
      lis[0].style.color = this.all.window.navigationBarBackgroundColor;
      lis[0].style.borderLeftColor = this.all.window.navigationBarBackgroundColor;
    }
    this.$nextTick(function () {
      //dom已更新
        const rightItem = document.querySelectorAll('.cate_item');
        const cateList = this.$refs.rightList;
        let length = rightItem.length;
        let height = rightItem[length-1].offsetHeight;
        let scrollHeight = cateList.offsetHeight;
        if(height < scrollHeight){
          rightItem[length-1].style.height = scrollHeight+'px';
        }
      let arr =[];
        rightItem.forEach(function(v, i){
          arr.push({top: v.offsetTop - rightItem[0].offsetTop, height: v.offsetHeight, index: i});
        });
        this.itemVal = arr;
        cateList.addEventListener('scroll', this.onScroll);
        this.container = cateList;
    })
  }
}
</script>
<style scoped>
  header{
    top:50px;
    height: 50px;
    background: #2196f3;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  header>p{
     90vw;
    padding: 0.12rem 0.1rem;
    background-color: #ffffff;
    border-radius: 0.1rem;
    margin-bottom: 5px;
    text-align: center;
    color: #8a9aa7;
  }
  .content{
    display: flex;
  }
  .sort_left{
    flex:0 1 20vw;
  }
  .sort_left>li{
    height:50px;
    line-height: 50px;
    text-align: center;
    background-color: #ffffff;
    cursor: pointer;
  }
  .active{
    border-left: 5px solid #2196f3;
    background-color: #f6f6f6!important;
    /*color: #2196f3;*/
    font-weight: 600;
  }
  .sort_right{
    height: calc(100vh - 150px);
    overflow-y: auto;
    flex:1;
  }
  .sort_right::-webkit-scrollbar{
     5px;
    height: 5px;
    background-color: #f6f6f6;
  }
  .sort_right::-webkit-scrollbar-thumb{
    /* 10px;*/
    height: 5px;
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 2px rgba(0,0,0,.3);
    background-color: #f6f6f6;
  }
  .title{
    height:50px;
    line-height: 50px;
    text-align: center;
    font-weight: 600;
  }
</style>