鼠标经过经过时，将内容滚动到鼠标经过的位置

<template>
  <div class="page">
    <div class="box">
      <div class="menu">
        <div class="menu-item" @mouseover="scrollToContent(index)" v-for="(item, index) in items" :key="index" :data-index="index">{{ item.equi_code }}</div>
      </div>
      <div class="content" ref="content">
        <div class="content-item" v-for="(item, index) in items" :key="index" :data-index="index">Content for Item {{ item.name }}</div>
      </div>
    </div>
  </div>
</template>
<script>
import { getEquiList } from "@/api/Ledger"; //接口
export default {
  data() {
    return {
      items: [],
      params: {
        page: 1,
        limit: 20
      }
    };
  },

  created() {
    this.initData();
  },
  
  methods: {
    async initData() {
      const res = await getEquiList(this.params, this);
      this.items = res.data.data;
    },
    scrollToContent(index) {
    //在鼠标悬停在菜单项上时，找到与之对应的内容项
    //并获取该内容项的 DOM 引用。
    //然后，代码会使用这个引用来滚动内容区域，使其包含的内容项与鼠标悬停的菜单项对齐
      const contentItem = this.$refs.content.querySelector(`.content-item[data-index="${index}"]`);
      if (contentItem) {
        contentItem.scrollIntoView({ behavior: "smooth", block: "start", top: contentItem.offsetTop });
      }
    }
  }
};
</script>

<style scoped lang="scss">
.page {
  display: flex;
  .box {
    display: flex;
    margin: auto;
    .menu {
      width: 200px;
      height: 500px;
      overflow: auto;
      background-color: cadetblue;
      .menu-item {
        padding: 10px;
        border-bottom: 1px solid #eee;
        cursor: pointer;
        &:hover {
          background-color: #eee;
        }
      }
    }

    .content {
      flex: 1;
      overflow: auto;
      height: 500px; /* 设置内容区域的高度 */
      width: 400px;
      background-color: yellowgreen;
      .content-item {
        padding: 10px;
        height: 100px; /* 假设每个内容项的高度为100px */
        border-bottom: 1px solid #eee;
      }
    }
  }
}
</style>