vue3侦听div盒子距离视口顶部的距离

在Vue3中，如果你想要监听某个`div`元素相对于视口顶部的距离，你可以使用`IntersectionObserver` API结合计算属性或者自定义事件来实现。这个API允许你在元素进入、离开或满足其他交集条件时触发回调。

首先，在组件的data里创建一个空的变量来存储元素的位置信息：

data() {
  return {
    elementTopDistance: null,
    observer: null,
  };
},

然后在模板中设置观察的目标元素：

<div ref="referenceDiv" @intersectionObserver="handleIntersection"></div>

接下来，在methods里编写`handleIntersection`方法：

methods: {
  handleIntersection({ isIntersecting }) {
    if (isIntersecting) {
      this.observer = new IntersectionObserver(
        ([entry]) => {
          this.elementTopDistance = entry.boundingClientRect.top;
        },
        { threshold: 0 } // 观察元素是否完全在视野内
      );
      this.observer.observe(this.$refs.referenceDiv);
    } else {
      this.observer.unobserve(this.$refs.referenceDiv);
      this.elementTopDistance = null;
    }
  },
},

当你需要获取当前位置时，可以直接访问`elementTopDistance`数据属性。