vue 使用scroll实现锚点

1.最近出来一个新需求，要求滚动分组时右边出现导航栏，可以通过导航栏跳转到相应分组，实现效果如下：
2.首先监听滚动@scroll="scrollEvent"，滚动方法实现如下：

// 监听滚动
    scrollEvent (e) {
      this.showMao = true // 显示导航栏
      let scrollItems = document.querySelectorAll('.temp-items')
      for (let i = scrollItems.length - 1; i >= 0; i--) {
        let judge =
          e.target.scrollTop >=
          scrollItems[i].offsetTop - scrollItems[0].offsetTop - 80 // 减去80是我页面布局的原因，视情况而定
        if (judge && this.toMove) { // 右边导航栏跟随滚动
          this.toMove = true
          this.activeStep = i
          this.scrollLabel(`${i}child`)
          break
        }
      }
    },

3.实现导航跟随页面滚动方法

     scrollLabel (e) {
      let _this = this
      let t = 1
      let queryId = document.getElementById(e)
      queryId.scrollIntoView({behavior: 'smooth', block: 'center', inline: 'nearest'})

      if (this.timer2) {
        clearInterval(this.timer2)
      }
      // 未滚动后两秒隐藏导航栏
      this.timer2 = setInterval(() => {
        if (t <= 0 && _this.hideMao) {
          clearInterval(_this.timer2)
          _this.showMao = false
          _this.$forceUpdate()
          return
        }
        t--
      }, 1000)
    },

4.实现点击导航栏跳转对应分组：

 jump (e) {
      this.toMove = false
      let queryId = document.getElementById(e)
      this.activeStep = e
      new Promise(
        function (resolve, reject) {
          resolve('成功')
          queryId.scrollIntoView(true)
        },
      ).then(
        (res) => {
          this.toMove = true
        },
      )
    },

data里面变量初始状态

	  activeStep: 0,
      hideMao: true,
      loading: false,
      toMove: true,
      showMao: false,
      timer2: null

5.页面上也通过鼠标移入移出改变导航栏显示隐藏，如下;

<div class="page-container" @scroll="scrollEvent">
        <div class="temp-items" :id="index" v-for="(option, index) in tempList" :key="'temp-'+index">
          <div class="temp-top">
            <div class="top-info">
              <h3 class="top-title">{{option.name}}</h3>
              <div class="top-text">{{option.desc || '暂无题组介绍'}}</div>
            </div>
          </div>
          <div class="temp-fields" v-loading="loading">
            <template-draggable ref="TemplateDraggable"
                                :templateValues="option.fields"
                                :templateId="''+index"
                                :readOnly="crfStatus===1 || proStatus ===0 || !anStatus"
                                :draggable="false"
                                :editorAble="false"
                                v-on:templateBack="templateEdit"
            ></template-draggable>
          </div>
        </div>
        <transition name="fade">
          <div class="maoDian" v-show="showMao" @mouseleave="showMao=false;hideMao=true" @mouseenter="hideMao=false">
            <div v-for="(option, index) in tempList" :style="{color: activeStep === index ? '#1987e1' : '#5c5c5c'}"
                 :key="option.name">
              <span :id="index+'child'" @click="jump(index)">{{option.name}}</span>
            </div>
          </div>
        </transition>
      </div>

6.不过在跳转的时候我没加平滑过渡，原因是加了平滑过渡后，还没滚动完，Promise就执行完成了，toMove 状态就改变了，导致后面滑动页面，导航栏就不随页面滚动到相应目录，效果如下：
希望路过的大佬救救孩子