VUE3中检测元素是否出现在视图窗口

直接上代码

<template>
<div ref="box"><div>
</template>
<script setup>
import {ref,onMounted} from "vue"
// 获取要检测的元素,必须使用的是vue中获取元素的方式
const box = ref(null)
onMounted(()=>{
  // 检测元素是否在视图窗口的函数
  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        // 当元素进入视窗口时触执行这里面的代码
        console.log('元素进入视图窗口', box) 
      }
    });
  });
  observer.observe(box.value);
})
</script>