JS实现类似通讯录的字母索引

给xxx写的demo
右侧的字母导航随着左侧的数据移动

<template>
  <div>
    <div class="letter-container">
      <div id="scroll_content" class="letter-content">
        <div v-for="(item,index) in letters" :id="'letter_'+item" :key="index" class="letter-block">{{ item }}</div>
      </div>
      <div class="letter-guide">
        <p v-for="(item,index) in letters" :key="index" :class="cur_letter==item?'active':''" @click="selectLetter(item)">{{ item }}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      cur_letter: 'A',
      letters: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'X', 'Y', 'Z'],
      allContents: null,
      offsetTopArr: []
    }
  },
  methods: {
    listerScroll () {
      document.getElementById('scroll_content').addEventListener('scroll', () => {
        const height = document.getElementById('scroll_content').scrollTop
        this.offsetTopArr.forEach(item => {
          if (height > item.offsetTop) {
            this.cur_letter = item.innerText
          }
        })
      })
    },
    selectLetter (val) {
      this.cur_letter = val
      var target = document.getElementById('letter_' + val)
      // target .scrollIntoView(true) // 跳转会有问题
      target.parentNode.scrollTop = target.offsetTop + 5
    }

  },
  mounted () {
    this.$nextTick(() => {
      this.allContents = document.querySelectorAll('.letter-block')
      this.allContents.forEach(item => {
        this.offsetTopArr.push({ offsetTop: item.offsetTop, innerText: item.innerText })
      })
      this.listerScroll()
    })
  }

}
</script>

<style lang="scss" scoped>
.letter-container{
  position: relative;width: 380px;
}
.letter-content{
  height: 400px;
  overflow: auto;

}
.letter-block{
  height: 50px;

}
.letter-guide{
  width: 30px;position: absolute;
  top: 20px;
  right: 20px;
  p{
    font-size: 14px;
    margin: 0;    text-align: center;cursor: pointer;
  }
  p:hover{
    color: dimgrey;
  }
}
.active{
  background: burlywood;
  border-radius: 20px;
}
</style>

使用position:sticky实现顶吸效果：
https://segmentfault.com/a/1190000017998387