vue3实现盒子内触底加载

html

		<div class="container">
			<div class="content scroll-my-container" ref="chatRef" @scroll="handleScroll">
				<div class="chat-list" ref="chatListRef" v-if="chatListAll.length">
					<chat-item
						v-for="(chat, index) in chatListAll"
						:key="index"
						:chat="chat"
						@talkContentEditSuccess="talkContentEditSuccessHandle"
						@singlePlay="singlePlayHandle"
						@singlePause="singlePauseHandle"
						@auditSuccess="auditSuccessHandle"
					></chat-item>
					<div class="loading-container">
						<t-loading size="small" text="加载中..." v-if="loading"></t-loading>
						<div class="finish-container" v-if="finish">没有更多了</div>
					</div>
				</div>

				<div class="no-data" v-else>- 暂无数据 -</div>
			</div>
		</div>

js

/**
 * 处理触底加载更多
 */

const handleScroll = () => {
	const container = chatRef.value;
	console.log(container.scrollTop, container.clientHeight, container.scrollHeight);
	if (Math.ceil(container.scrollTop + container.clientHeight) >= container.scrollHeight) {
		if (!finish.value) {
			pager.page++;
			queryEnforceLawContent();
		}
		console.log('到底了');
	}
};