ReactJS中如何判断组件内滚动条已到达顶部

不管你用原生JS还是主流前端框架，核心思路都是监听组件的滚动事件，然后判断滚动距离是否为0。下面分几种常见场景给出具体实现：

原生 JavaScript 场景 #

• 先获取到带滚动条的组件DOM元素
• 给它绑定scroll事件，在回调里检查scrollTop属性：当scrollTop等于0时，就说明滚动条到顶了
• 考虑到部分浏览器的滚动精度问题，也可以用scrollTop <= 1来兼容极小数值的情况

// 替换成你的组件ID
const scrollBox = document.getElementById('scrollable-component');
scrollBox.addEventListener('scroll', function() {
  if (this.scrollTop <= 1) {
    console.log('滚动条已经到顶部了');
    // 这里写你要执行的逻辑，比如加载数据、显示提示等
  }
});

React 组件场景 #

用useRef拿到组件的DOM节点，在useEffect里绑定和清理滚动监听：

import { useRef, useEffect } from 'react';

function MyScrollableComponent() {
  const containerRef = useRef(null);

  useEffect(() => {
    const handleScroll = () => {
      if (containerRef.current?.scrollTop <= 1) {
        console.log('滚动条到达顶部');
        // 执行你的业务逻辑
      }
    };

    const container = containerRef.current;
    if (container) {
      container.addEventListener('scroll', handleScroll);
      // 组件卸载时移除监听，避免内存泄漏
      return () => container.removeEventListener('scroll', handleScroll);
    }
  }, []);

  return (
    <div 
      ref={containerRef} 
      style={{ height: '400px', overflowY: 'auto' }}
    >
      {/* 这里放你的组件内容 */}
    </div>
  );
}

Vue 组件场景 #

Vue3 示例 #

通过ref获取DOM元素，在onMounted中绑定滚动监听，onUnmounted中移除：

<template>
  <div 
    ref="scrollContainer" 
    style="height: 400px; overflow-y: auto;"
  >
    <!-- 组件内容区域 -->
  </div>
</template>

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

const scrollContainer = ref(null);
let scrollHandler = null;

onMounted(() => {
  scrollHandler = () => {
    if (scrollContainer.value?.scrollTop <= 1) {
      console.log('滚动条到顶部了');
      // 处理你的逻辑
    }
  };
  scrollContainer.value?.addEventListener('scroll', scrollHandler);
});

onUnmounted(() => {
  scrollContainer.value?.removeEventListener('scroll', scrollHandler);
});
</script>

Vue2 示例 #

<template>
  <div 
    ref="scrollContainer" 
    style="height: 400px; overflow-y: auto;"
  >
    <!-- 组件内容 -->
  </div>
</template>

<script>
export default {
  mounted() {
    this.scrollHandler = () => {
      if (this.$refs.scrollContainer.scrollTop <= 1) {
        console.log('滚动条到达顶部');
        // 执行逻辑
      }
    };
    this.$refs.scrollContainer.addEventListener('scroll', this.scrollHandler);
  },
  beforeDestroy() {
    this.$refs.scrollContainer.removeEventListener('scroll', this.scrollHandler);
  }
};
</script>

内容的提问来源于stack exchange，提问作者suresh