vue3+ts页面实现楼层滚动

要实现楼层滚动，可以使用 Vue3 + TypeScript 结合使用 `Intersection Observer API` 和 `scrollIntoView` API 来实现。以下是一个简单的示例代码：

<template>
  <div>
    <div v-for="(floor, index) in floors" :key="index" ref="floor">
      <!-- 楼层内容 -->
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted } from "vue";

export default defineComponent({
  data() {
    return {
      floors: [], // 楼层数组
    };
  },
  methods: {
    handleIntersection(entries: IntersectionObserverEntry[]) {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          // 当前楼层进入视口
          entry.target.scrollIntoView({
            behavior: "smooth", // 平滑滚动
          });
        }
      });
    },
  },
  mounted() {
    // 创建 IntersectionObserver 实例
    const observer = new IntersectionObserver(this.handleIntersection, {
      root: null, // 使用默认根元素
      rootMargin: "0px", // 根元素边距为 0
      threshold: 0.5, // 当元素可见度达到 50% 时触发回调函数
    });

    // 遍历 floors 数组，为每个楼层添加观察者
    this.$refs.floor.forEach((floor: HTMLElement) => {
      observer.observe(floor);
      this.floors.push(floor);
    });
  },
});
</script>

在上述代码中，我们首先在模板中使用 `v-for` 循环遍历楼层，通过 `ref` 属性引用楼层元素。然后在组件的 `mounted` 钩子函数中，创建 `IntersectionObserver` 实例，并为每个楼层元素添加观察者。当某个楼层进入视口时，通过 `scrollIntoView` 方法平滑滚动到该楼层。

需要注意的是，在 `IntersectionObserver` 的回调函数中，我们通过 `scrollIntoView` 方法滚动到楼层时，可能会触发新的回调函数，这可能会导致一些问题。为了避免这种情况，我们可以在回调函数中添加一些额外的判断条件，比如判断当前是否正在滚动，以避免滚动冲突。