当前位置：首页 > React

react如何监听滚动条到底部

2026-01-26 05:18:52React

监听滚动条到底部的实现方法

在React中，可以通过监听滚动事件并结合元素的滚动高度、可视高度和滚动位置来判断是否滚动到底部。以下是几种常见的实现方式：

使用原生事件监听

通过window或特定元素的scroll事件，计算滚动位置与底部的关系：

import { useEffect } from 'react';

const handleScroll = () => {
  const { scrollTop, scrollHeight, clientHeight } = document.documentElement;
  if (scrollTop + clientHeight >= scrollHeight - 10) {
    console.log('滚动到底部');
  }
};

useEffect(() => {
  window.addEventListener('scroll', handleScroll);
  return () => window.removeEventListener('scroll', handleScroll);
}, []);

针对特定容器监听

如果滚动区域是某个div而非整个页面，可以通过ref获取容器元素并监听其滚动事件：

import { useRef, useEffect } from 'react';

const ScrollContainer = () => {
  const containerRef = useRef(null);

  useEffect(() => {
    const container = containerRef.current;
    const handleScroll = () => {
      if (container.scrollTop + container.clientHeight >= container.scrollHeight - 10) {
        console.log('滚动到底部');
      }
    };
    container.addEventListener('scroll', handleScroll);
    return () => container.removeEventListener('scroll', handleScroll);
  }, []);

  return (
    <div ref={containerRef} style={{ height: '300px', overflow: 'auto' }}>
      {/* 长内容 */}
    </div>
  );
};

使用自定义Hook封装逻辑

将逻辑封装为可复用的Hook，方便在多个组件中使用：

import { useEffect, useRef } from 'react';

const useScrollToBottom = (callback, offset = 10) => {
  const containerRef = useRef(null);

  useEffect(() => {
    const container = containerRef.current || window;
    const handleScroll = () => {
      const scrollHeight = container === window 
        ? document.documentElement.scrollHeight 
        : container.scrollHeight;
      const scrollTop = container === window 
        ? document.documentElement.scrollTop 
        : container.scrollTop;
      const clientHeight = container === window 
        ? document.documentElement.clientHeight 
        : container.clientHeight;

      if (scrollTop + clientHeight >= scrollHeight - offset) {
        callback();
      }
    };
    container.addEventListener('scroll', handleScroll);
    return () => container.removeEventListener('scroll', handleScroll);
  }, [callback, offset]);

  return containerRef;
};

// 使用示例
const Component = () => {
  const handleBottomReached = () => console.log('底部触发');
  const containerRef = useScrollToBottom(handleBottomReached);

  return <div ref={containerRef}>{/* 内容 */}</div>;
};