<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>
