废话不多说，直接上demo代码

<template>
    <!-- <div class="box">
        <img :id="`img${item}`" ref="img" src="../assets/image/app-center.png" alt="" v-for="(item) in 56" :key="item">
    </div> -->
    <div class="container">
        <div class="auto">
            <div class="item" data-id="1">元素1：不可见</div>
            <div class="item" data-id="2">元素2：不可见</div>
            <div class="item" data-id="3">元素3：不可见</div>
            <div class="item" data-id="4">元素4：不可见</div>
            <div class="item" data-id="5">元素5：不可见</div>
            <div class="item" data-id="6">元素6：不可见</div>
            <div class="item" data-id="7">元素7：不可见</div>
            <div class="item" data-id="8">元素8：不可见</div>
            <div class="item" data-id="9">元素9：不可见</div>
            <div class="item" data-id="10">元素10：不可见</div>
        </div>
        
    </div>
</template>
<script setup lang='ts'>
import { ref, onMounted } from 'vue';

// const img = ref();
// let obs = new IntersectionObserver((res, observer) => {
//     // 相交时会触发这个函数，res是整个观察的对象，包括了相交和未相交的
//     let intersect = res.filter((e:any) =>{
//         return e.isIntersecting;  //过滤出相交的元素
//     });
//     console.log('111');
    
//     intersect.forEach((e:any) =>{
//         e.target.src = "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg";
//         obs.unobserve(e.target);  //取消监听
//     });
// }, {
//     root:null,  //观察者要相交的元素，null就是视口，也可以是其父元素和祖先元素
//     rootMargin:"10px",  //不常用，root为null的时候设置会报错，距离root元素多少px的时候会触发回调函数
//     threshold: 0, //观察者和root元素重叠的比例,值为0-1范围，0就是刚刚重叠，1就是完全重叠
// })
// onMounted(() => {
//     // console.log('demodemo', document.getElementById('demo'));
//     for (let index = 0; index < 56; index++) {
//         const element = document.getElementById(`img${index+1}`)
//         // console.log('eeee', element);
//         obs.observe(element)
//     }
//     // img.value.forEach((e:any) =>{
//     //     obs.observe(e);  //建立监听
//     // });
// });
onMounted(() => {
    if (window?.IntersectionObserver) {
    let items = [...document.getElementsByClassName('item')] // 解析为真数组，也可用 Array.prototype.slice.call()
    console.log('items>>', items);
    
    let io = new IntersectionObserver(entries => {
        // 相交时会触发这个函数，res是整个观察的对象，包括了相交和未相交的
        let intersect = entries.filter((e:any) =>{
            return e.isIntersecting;  //过滤出相交的元素
        });
        intersect.forEach(item => {
        // intersectionRatio === 1说明该元素完全暴露出来
        // if (item.intersectionRatio === 1) {
          item.target.style.backgroundColor = 'deeppink'
          item.target.innerHTML = `元素${item.target.getAttribute('data-id')}：完全可见`
        // }
        // else {
        //   item.target.style.backgroundColor = 'deepskyblue'
        //   item.target.innerHTML = `元素${item.target.getAttribute('data-id')}：不可见`
        // }
      })
    }, {
      root: null,
      rootMargin: '10px',
      threshold: 0 // 阀值设为1，当只有比例达到1时才触发回调函数
    })

    items.forEach(item => io.observe(item))
  }
})

</script>
<style scoped lang='scss'>
.box {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    overflow: auto;
    border: 1px solid red;
    img {
        width: 255px;
        height: 300px;
        margin-bottom: 20px;
    }
}
.container {
    // border: 1px solid red;
    height: 100vh;
    overflow: auto;
    .auto {
        // height: auto;
        .item {
            height: 300px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            // color: #fff;
            border: 2px solid #FFF;
        }
    }
}
</style>

兼容性

兼容市面的主流浏览器，总体来说乐观，不过为了代码的严谨，简单判断下：

if (window?.IntersectionObserver) {
    let io = new IntersectionObserver(callback, options)
    io.observe(targetElement)
}