写个这小玩意真麻烦

<template>
  <div id="letterPeo">
    <!--    <button @click="getasd">获取</button>-->
    <div class="letter">
      <div v-for="(item, index) in letter" :key="index" class="mb-2 item" :class="{active:selectItem == item }" @click="scrollOn(item, index)">
        {{ item }}
      </div>
    </div>

    <div class="peoBox" ref="scrollContainer">
      <div v-for="(item, index) in peoArray" :key="index" @click="onSelect(item, index)">
        <p class="peoKey" :id="'peo' + item.key">{{ item.key }}</p>
        <p class="peolist" v-for="(ele, e) in item.list" :key="e">{{ ele.name }}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectItem: "A",
      letter: [],
      peoArray: [
        {key: "A", list: [{name: "安吉"}, {name: "安吉"}]},
        {key: "B", list: [{name: "bar饿啊额日"}, {name: "芭比"}]},
        {key: "C", list: [{name: "啛啛喳喳"}, {name: "吃炒菜"}]},
        {key: "D", list: [{name: "滴滴滴"}]},
        {key: "E", list: [{name: "鹅鹅鹅"}]},
        {key: "F", list: [{name: "方慧"}]},
        {key: "G", list: [{name: "哥哥"}]},
        {key: "H", list: [{name: "话说"}]},
        {key: "I", list: [{name: "ID额我热饭v"}]},
        {key: "J", list: [{name: "接化发"}]},
        {key: "K", list: [{name: "KFC"}]},
        {key: "L", list: [{name: "吕布"}]},
        {key: "M", list: [{name: "没读书"}]},
        {key: "N", list: [{name: "牛头人"}]},
        {key: "O", list: [{name: "O泡果奶"}]},
        {key: "P", list: [{name: "判断得我"}]},
        {key: "Q", list: [{name: "秦三儿"}]},
        {key: "R", list: [{name: "如果更方便"}]},
        {key: "S", list: [{name: "塞班"}]},
        {key: "T", list: [{name: "糖糖"}]},
        {key: "U", list: [{name: "U哈哈哈哈"}]},
        {key: "V", list: [{name: "V ME 50"}]},
        {key: "W", list: [{name: "王富贵"}]},
        {key: "X", list: [{name: "喜羊羊"}]},
        {key: "Y", list: [{name: "阳顶天"}]},
        {key: "Z", list: [{name: "自发热"}]}
      ]
    };
  },
  computed: {},
  mounted() {
    this.letter = Array.from({length: 26}, (_, i) => String.fromCharCode(65 + i));
    this.$refs.scrollContainer.addEventListener('scroll', this.debounce(this.handleScroll, 200));
  },
  methods: {
    handleScroll(event) {
      const container = document.querySelector('#letterPeo');
      const closestElement = this.getClosestElementToTop(container);
      this.selectItem = closestElement;
    },
    debounce(func, wait) {
      let timeout;
      return function (...args) {
        const later = () => {
          clearTimeout(timeout);
          func.apply(this, args);
        };
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
      };
    },
    getasd() {
      const container = document.querySelector('#letterPeo');
      const closestElement = this.getClosestElementToTop(container);
      this.selectItem = closestElement;
    },
    getClosestElementToTop(container) {
      const elements = document.querySelectorAll(".peoKey");
      // console.log("container.getBoundingClientRect().top", container.getBoundingClientRect().top);
      let closestElement = null;
      let closestDistance = Infinity;
      for (let element of elements) {
        const rect = element.getBoundingClientRect();
        const distance = Math.abs(rect.top - container.getBoundingClientRect().top);
        // console.log("rect.top", rect.top, distance, distance < closestDistance);
        if (distance < closestDistance) {
          closestDistance = distance;
          closestElement = element;
        }
      }
      return closestElement.innerText;
    },
    scrollOn(item) {
      this.selectItem = item;
      let target = document.getElementById("peo" + item);
      if (target) {
        target.scrollIntoView({behavior: "smooth" /*auto*/});
      }
    },
    // 点击通讯录
    onSelect(item, index) {
      console.log(item, index);
    }
  },
  beforeDestroy() {
    this.$refs.scrollContainer.removeEventListener('scroll', this.debounce(this.handleScroll, 200));
  },
};
</script>

<style lang="scss" scoped>
#letterPeo {
  width: 800px;
  height: 500px;
  display: flex;
  justify-content: space-between;
  overflow-y: auto;
  background: #fff;

  .letter {
    font-size: 12px;
    margin-right: 20px;

    .item {
      padding: 1px;
      cursor: pointer;

      &.active {
        background: pink;
      }
    }
  }

  .peoBox {
    height: 100%;
    overflow-y: auto;
    flex: 1;
    width: 100%;
    padding: 0 10px;

    .peoKey {
      margin: 10px 0;
      font-size: 12px;
      background-color: #f3efef;
    }

    .peolist {
      margin: 20px 0;
    }
  }
}
</style>