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

随便写的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
      document.getElementById('letter_' + val).scrollIntoView(true)
    }

  },
  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