如何监听列表组件滚动事件

监听列表组件的滚动事件，具体实现方式取决于你使用的前端框架/技术栈。下面我按常见场景给你总结几种做法：

一、原生 HTML / JavaScript

如果是普通 <ul>、<div> 列表：

<div id="list" style="height:300px;overflow:auto;">
  <!-- 列表内容 -->
</div>

<script>
  const list = document.getElementById('list');
  list.addEventListener('scroll', (e) => {
    console.log('滚动位置:', list.scrollTop);
  });
</script>

二、Vue（Vue 2 / Vue 3）

1. 普通 DOM 监听

<template>
  <div class="list" ref="list">
    <!-- 列表 -->
  </div>
</template>

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

const list = ref(null)

onMounted(() => {
  list.value.addEventListener('scroll', () => {
    console.log(list.value.scrollTop)
  })
})
</script>

2. 使用 @scroll

<template>
  <div class="list" @scroll="onScroll">
    <!-- 列表 -->
  </div>
</template>

<script setup>
const onScroll = (e) => {
  console.log(e.target.scrollTop)
}
</script>

三、React

function List() {
  const handleScroll = (e) => {
    console.log(e.target.scrollTop)
  }

  return (
    <div style={{ height: 300, overflow: 'auto' }} onScroll={handleScroll}>
      {/* 列表内容 */}
    </div>
  )
}

四、小程序（微信 / 支付宝）

微信小程序

<scroll-view scroll-y bindscroll="onScroll">
  <!-- 列表 -->
</scroll-view>

Page({
  onScroll(e) {
    console.log(e.detail.scrollTop)
  }
})

五、常见进阶用法

1. 滚动到底部（加载更多）

function onScroll(e) {
  const { scrollTop, clientHeight, scrollHeight } = e.target
  if (scrollTop + clientHeight >= scrollHeight - 10) {
    console.log('到达底部')
  }
}

2. 节流（防止频繁触发）

let timer = null
function onScroll(e) {
  if (timer) return
  timer = setTimeout(() => {
    console.log(e.target.scrollTop)
    timer = null
  }, 100)
}

六、如果你用的是特定组件库

可以告诉我你用的是哪种：

• Element Plus
• Ant Design
• Vant
• uni-app
• Flutter
• Android / iOS 原生

我可以给你对应组件的精确写法。

你是用的哪种技术栈？