vue3 监听元素滚动

在Vue3中监听元素滚动通常会使用`IntersectionObserver API`，这是一个现代浏览器提供的API，用于检测目标元素是否出现在视窗视野内。以下是一个简单的例子：

import { ref, onMounted } from 'vue';

// 创建一个ref来存储节点
const elRef = ref(null);

onMounted(() => {
  // 当elRef指向的元素可见时开始监听
  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        console.log('Element is in viewport');
        // 这里可以添加滚动事件的处理函数
      } else {
        console.log('Element is not in viewport');
      }
    });
  });

  // 将observer绑定到elRef元素上
  observer.observe(elRef.value);
  
  // 清理观察者（比如组件卸载时）
  // 在离开钩子（如beforeDestroy）中调用observer.unobserve(elRef.value);
})

在这个例子中，`elRef`应该引用需要监听滚动的Vue组件内部的DOM元素。当元素进入或离开视口时，`intersectionCallback`会被调用。