Vue3 当某个元素出现时触发方法

<template>

　　<div class="full-page" @scroll="dbcFunc">

　　　　<div class="box" ref="myRef"></div>

　　</div>

</template>

 

<script setup>

import _ from 'lodash';

 

const dbcFunc = _.debounce(boxVisiable, 300) // 防抖

const myRef = ref(false)

 

function boxVisiable() {

　　const rect = myRef.value.getBoundingClientRect()

 

　　// 当box出现时

　　if (rect.top - window.innerHeight < 0) {

　　　　// do something

　　}

}

</script>

 

<style scoped>

/* 这里需要指定高度和overflow-y */

.full-page {

　　overflow-y: scroll;

　　height: 100%;

}

.box {

　　width: 100px;

　　height: 100px;

　　background-color: blue;

}

</style>