Vue3中滚动加载更多数据

<div class="my-task-body-inner" ref="scrollContainer"  @scroll="handleScroll" style="height: 100%;overflow-y: auto;">
 
</div>
 
 
        const scrollContainer = ref(null);
		const handleScroll = () => {
			if(scrollContainer.value.scrollTop === 0) {
				return;
			}
			if (scrollContainer.value.scrollTop + scrollContainer.value.clientHeight >= scrollContainer.value.scrollHeight) {
				console.log('output-> scrollContainer.value.scrollTop:: ', scrollContainer.value.scrollTop)
				console.log('output-> scrollContainer.value.clientHeight:: ', scrollContainer.value.clientHeight)
				console.log('output-> scrollContainer.value.scrollHeight:: ', scrollContainer.value.scrollHeight)
				if(total.value <= payload.value.pageSize) {
					message.warning('没有更多数据了');
					return;
				}
				payload.value.pageNum = 1;
				payload.value.pageSize = payload.value.pageSize + 10;
				getApplicationListFn();
				console.log('output-> 到达底部，加载更多数据')
			}
		}