vue实现根据点击或滑动展示对应高亮

页面需求：

• 点击左侧版本号，右侧展示对应版本内容并置于顶部
• 右侧某一内容滚动到顶部时，左侧需要展示高亮

实现效果：

实现代码：

<template>
  <div>
    <div class="historyBox pd-20 bg-white">
      <div class="w100 flex h100" v-if="versionList.length > 0">
        <div class="left size-14">
          <div
            v-for="(item, index) in versionList"
            :key="index"
            class="leftItem pd-10 pointer"
            :class="index == activeIndex ? 'isActive' : ''"
            @click="gotoTarget(index)"
          >
            <div>{{ item.versionNumber }}</div>
            <div>{{ item.releaseTime }}</div>
          </div>
        </div>
        <div class="right">
          <div
            v-for="(item, index) in versionList"
            :key="index"
            class="rightItem pd-20 center"
            :class="index == activeIndex ? 'isActive' : ''"
          >
            <div v-html="item.versionDescription" class="ql-editor w60"></div>
          </div>
        </div>
      </div>
      <div class="w100 h100 center size-16 gray-2" v-else>暂无版本记录</div>
    </div>
  </div>
</template>

<script>
import { listAllVersion } from "./components/api";

export default {
  name: "VersionHistory",
  data() {
    return {
      versionList: [], // 表格数据
      activeIndex: 0, // 高亮下标
      clickIndex: 0, // 点击下标
      scrollIndex: 0, // 滚动下标
      scrollStopTimer: null,
    };
  },
  created() {
    this.getList();
  },
  mounted() {},
  methods: {
    // 监听鼠标移入元素 、右侧父元素滚动
    checkItemsHover() {
      const rightBox = document.querySelector(".right");

      // 监听父容器的滚动事件
      rightBox.addEventListener("scroll", this.checkItemsAtTop);

      // 页面加载时也检查一次
      window.addEventListener("load", this.checkItemsAtTop);
    },
    // 监听元素 rightItem 触顶
    checkItemsAtTop() {
      const rightBox = document.querySelector(".right");
      const rightItems = Array.from(rightBox.querySelectorAll(".rightItem"));
      rightItems.forEach((item, index) => {
        // 使用 getBoundingClientRect 来获取元素相对于视口的位置
        const rect = item.getBoundingClientRect();
        const containerRect = rightBox.getBoundingClientRect();

        // 判断元素是否触顶父容器
        if (
          rect.top - containerRect.top <= 0 &&
          rect.bottom - containerRect.top >= 0
        ) {
          this.scrollIndex = index;
          // this.activeIndex = index;
        }

        // 清除之前的定时器，防止重复触发
        if (this.scrollStopTimer) {
          clearTimeout(this.scrollStopTimer);
        }
        // 设置新的定时器，在滚动停止后延迟指定时间触发
        this.scrollStopTimer = setTimeout(this.onScrollStopped, 150); // 150ms 的延迟可以根据需要调整
      });
    },
    // 滚动停止后的回调函数
    onScrollStopped() {
      // console.log("滚动停止了", this.scrollIndex, this.clickIndex);
      // 在这里放置你希望在滚动停止后执行的代码
      if (this.scrollIndex < this.clickIndex) {
        this.activeIndex = this.clickIndex;
        this.clickIndex = 0;
      } else {
        this.activeIndex = this.scrollIndex;
      }
      const leftItems = document.querySelectorAll(".leftItem");
      const leftBox = document.querySelector(".left");
      const targetLeftItem = leftItems[this.activeIndex];
      // 计算目标元素距离父容器顶部的距离
      const offsetTop = targetLeftItem.offsetTop - leftBox.offsetTop;

      // 使用 scrollTo 方法让父容器滚动到目标元素的位置
      leftBox.scrollTo({
        top: offsetTop,
        behavior: "smooth", // 如果需要平滑滚动，请确保父容器设置了 scroll-behavior: smooth;
      });
    },
    // 定义当鼠标移入时触发的函数
    gotoTarget(index) {
      // this.scrollIndex = index;
      this.clickIndex = index;
      this.activeIndex = index;

      const rightItems = document.querySelectorAll(".rightItem");
      const rightBox = document.querySelector(".right");
      const targetRightItem = rightItems[index];
      /* // 使用 scrollIntoView 方法让目标元素滚动到视图顶部
      targetRightItem.scrollIntoView({ behavior: "smooth", block: "start" }); */

      // 计算目标元素距离父容器顶部的距离
      const offsetTop = targetRightItem.offsetTop - rightBox.offsetTop + 1;

      // 使用 scrollTo 方法让父容器滚动到目标元素的位置
      rightBox.scrollTo({
        top: offsetTop,
        behavior: "smooth", // 如果需要平滑滚动，请确保父容器设置了 scroll-behavior: smooth;
      });
    },
    /** 查询列表 */
    getList() {
      listAllVersion().then((response) => {
        this.versionList = response.data;
        // .concat(response.data)
        // .concat(response.data)
        // .concat(response.data)
        // .concat(response.data);
        this.$nextTick(() => {
          this.checkItemsHover();
        });
      });
    },
  },
};
</script>
<style lang="scss" scoped>
@import "./components/quill.snow.css";
.historyBox {
  height: calc(100vh - 90px);
  ::-webkit-scrollbar {
    width: 6px;
    // height: 24px;
  }

  /* 滚动槽的样式设置 */
  ::-webkit-scrollbar-track {
    background: #eee;
  }

  /* 滚动条滑块的样式设置 */
  ::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.1);
    background: rgb(158, 203, 255);
    border-radius: 12px;

    &:hover {
      background: rgb(95, 169, 253);
    }
  }
  .left {
    width: 260px;
    min-width: 260px;
    height: 100%;
    // height: calc(100vh - 117px);
    overflow-y: auto;

    .leftItem {
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      border: 1px solid #eee;
    }
    .isActive {
      border: 1px solid #3f8cff;
      border-left: 4px solid #3f8cff;
      color: #3f8cff;
      background: rgba(63, 140, 255, 0.1);
      font-weight: bold;
    }
  }
  .right {
    box-sizing: border-box;
    width: calc(100% - 260px);
    height: 100%;
    // height: calc(100vh - 117px);
    overflow-y: auto;
    background: #eef6ff;

    .rightItem {
      border: 1px dotted #eef6ff;
      &:hover {
        border: 1px dotted #ddd;
      }
      .w60 {
        width: 60%;
      }
    }
    .isActive {
      // border: 1px dotted #ddd;
      border: 1px dotted #3f8cff;
      // box-shadow: 0px 0px 20px #3f8cff;
      // box-shadow: 0px 5.04px 10.08px rgba(55, 114, 233, 0.22),
      //   inset 0px 5.04px 10.08px rgba(211, 221, 242, 1);
    }
  }
}
</style>