React中如何实现循环无限滚动（非分页）？

• 脱离React虚拟DOM控制：直接用cloneNode(true)操作真实DOM并添加，会导致克隆出的元素无法被React追踪——如果原children包含React组件，克隆的DOM不会有组件的生命周期、事件绑定和状态同步，后续交互或状态更新会失效。
• 内容无限膨胀：每次滚动到底都添加新元素，容器的scrollHeight会持续增大，用户需要滚动的距离越来越长，完全无法实现原网站“无缝回到开头”的视觉循环效果，反而会导致性能问题。
• 滚动判断逻辑有精度问题：scrollTop + clientHeight >= scrollHeight的判断容易因滚动事件触发时机、浏览器渲染精度导致多次触发克隆，或者快速滚动时判断不准确。
• 缺失向上滚动逻辑：当前代码只处理了向下滚动的情况，完全没有实现“向上滚动返回着陆区域”的需求。

目标网站的效果是视觉循环，而非真的无限添加内容，核心是通过克隆内容+滚动位置重置实现无缝衔接：

1. 在容器中渲染两份完全相同的内容（用React的方式克隆，而非操作真实DOM），让总高度为原始内容的两倍。
2. 监听滚动事件，当滚动到接近底部时，立即将滚动位置重置到顶部；当滚动到接近顶部时，重置到原始内容高度的位置（实现向上循环）。
3. 如果需要“向上滚动返回着陆区”（而非循环），则在滚动到顶部附近时平滑滚动到初始位置。

interface ScrollableProps {
  heading: string;
  children?: React.ReactNode;
}
const Scrollable = ({ heading, children }: ScrollableProps) => {
  const scrollRef = React.useRef<HTMLDivElement>(null);
  const contentRef = React.useRef<HTMLDivElement>(null);
  const [isScrolling, setIsScrolling] = React.useState(false);

  useEffect(() => {
    const handleScroll = () => {
      if (!scrollRef.current || !contentRef.current) return;
      
      const { scrollTop, clientHeight } = scrollRef.current;
      const singleContentHeight = contentRef.current.scrollHeight / 2;

      // 向下滚动接近底部，重置到顶部实现无缝循环
      if (scrollTop + clientHeight >= singleContentHeight * 2 - 10) {
        scrollRef.current.scrollTop = 0;
      }

      // 向上滚动接近顶部，重置到单份内容高度位置（实现向上循环）
      // 如果需要返回着陆区，替换为scrollTo({top:0, behavior:'smooth'})
      if (scrollTop <= 10) {
        scrollRef.current.scrollTop = singleContentHeight;
      }
    };

    // 防抖处理避免滚动事件频繁触发导致的抖动
    const debounceScroll = () => {
      if (!isScrolling) {
        setIsScrolling(true);
        requestAnimationFrame(() => {
          handleScroll();
          setIsScrolling(false);
        });
      }
    };

    scrollRef.current?.addEventListener("scroll", debounceScroll);
    return () => {
      scrollRef.current?.removeEventListener("scroll", debounceScroll);
    };
  }, [isScrolling]);

  return (
    <div ref={scrollRef} className="scrollable" style={{ overflowY: 'auto', height: '100vh' }}>
      <StickyNavBar heading={heading}></StickyNavBar>
      <div ref={contentRef} className="scrollable-contents">
        {children}
        {/* React方式克隆内容，保证组件状态和事件正常 */}
        {children}
      </div>
    </div>
  );
};

• 用React渲染两份children，确保所有组件的生命周期、事件绑定和状态都被React正常管理。
• 滚动位置重置时使用小阈值（10px），避免滚动事件触发时的抖动问题。
• 用requestAnimationFrame和防抖处理，优化滚动事件的性能，避免频繁执行逻辑导致卡顿。

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