vue3 监听容器滚动到底部
在容器里面添加@scroll事件
<template>
<div @scroll="scrolling" id="content">
<p v-for="i in Array.from({length: 30}, (v, i) => i)">
{{ i }}
</p>
</div>
<div v-if="bottom">到达底部</div>
</template>
<script setup>
import { ref } from 'vue'
const bottom = ref(false)
const scrolling = (e) => {
const clientHeight = e.target.clientHeight
const scrollHeight = e.target.scrollHeight
const scrollTop = e.target.scrollTop
if (scrollTop + clientHeight >= scrollHeight) {
console.log('到底了!')
bottom.value = true
} else {
bottom.value = false
}
}
</script>
<style>
#content {
height: 200px;
overflow: auto;
border: 1px solid red;
padding: 0 10px;
}
</style>