React中实现高度150px的Container div内简单无限滚动的问题

直接监听滚动容器的滚动事件即可实现，不需要复杂的Intersection Observer适配，具体实现如下：

第一步：配置滚动容器基础样式 #

先给Container组件对应的dom节点设置可滚动属性：

.container {
  height: 150px;
  overflow-y: auto;
  /* 以下为可选样式 */
  border: 1px solid #e5e7eb;
  padding: 8px;
}

第二步：完整代码实现 #

import { useRef, useState, useEffect } from 'react';

// 原始数据源
const originalData = ["honda", "vw","opel", "saab", "toyota","honda", "vw","opel", "saab", "toyota","honda", "vw","opel", "saab", "toyota","honda", "vw","opel", "saab", "toyota"];

const ScrollList = () => {
  // 存储当前渲染的列表数据
  const [renderData, setRenderData] = useState(originalData);
  // 滚动容器dom引用
  const containerRef = useRef(null);

  const handleScroll = () => {
    const container = containerRef.current;
    if (!container) return;
    // 判断是否滚动到距离底部5px的位置，预留阈值避免精度问题触发失败
    const isReachBottom = container.scrollTop + container.clientHeight >= container.scrollHeight - 5;
    if (isReachBottom) {
      // 滚动到底部时追加数据，可按实际需求修改追加逻辑
      setRenderData(prev => [...prev, ...originalData]);
    }
  };

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

  return (
    <Container ref={containerRef}>
      <ul>
        {renderData.map((d, index) => (
          // 优化key规则，避免重复数据导致的渲染异常
          <li key={`${index}-${d}`}>
            <div>
                  <span>some text</span>
                  <span>some text</span>
                  <span>some text</span>
            </div>
          </li>
        ))}
      </ul>
    </Container>
  );
};

export default ScrollList;

注意事项 #

• 如果你的Container是自定义封装组件，需要使用forwardRef将ref透传到内部实际的滚动div节点上，或者直接把滚动监听逻辑写在Container组件内部。
• 如果需要避免短时间内多次触发追加，可以给handleScroll加防抖逻辑，同时新增loading状态防止重复请求/追加。

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