vue.js 监听scroll

<template>
<div class="scroll-container" @scroll="handleScroll">
<!-- 内容 -->
</div>
</template>

<script setup>
import { onMounted, onUnmounted } from 'vue';

const handleScroll = (event) => {
console.log('滚动事件触发', event);
};

onMounted(() => {
const container = document.querySelector('.scroll-container');
container.addEventListener('scroll', handleScroll);
});

onUnmounted(() => {
const container = document.querySelector('.scroll-container');
container.removeEventListener('scroll', handleScroll);
});
</script>

<style>
.scroll-container {
height: 300px;
overflow-y: auto;
}
</style>

import { throttle } from 'lodash-es';

const handleScroll = throttle((event) => {
console.log('滚动事件触发', event);
}, 100); // 限制每100毫秒最多执行一次

const handleScroll = (event) => {
const scrollTop = event.target.scrollTop || window.pageYOffset;
console.log('当前滚动位置', scrollTop);
};