本文详解如何在 React 聊天界面中实现「从底部向上滚动触发加载」的无限滚动功能，解决 react-infinite-scroll-component 在 inverse={true} 模式下不触发 next 回调的问题，涵盖 DOM 结构、CSS 布局、版本兼容性及关键配置要点。

本文详解如何在 react 聊天界面中实现「从底部向上滚动触发加载」的无限滚动功能，解决 `react-infinite-scroll-component` 在 `inverse={true}` 模式下不触发 `next` 回调的问题，涵盖 dom 结构、css 布局、版本兼容性及关键配置要点。

在构建实时聊天应用时，常见的交互模式是：消息列表默认锚定在容器底部（最新消息在最下方），用户向上滚动时动态加载历史消息。react-infinite-scroll-component 支持 inverse={true} 模式以适配该场景，但若配置不当或依赖版本不匹配，极易出现“滚动到顶无响应、fetchMoreData 完全不执行”等问题——正如问题中所描述：console.log('Fetch called') 从未输出。

根本原因并非逻辑错误，而在于 inverse 模式对底层 DOM 行为和 React 版本的高度敏感性。官方示例（如旧版 CodeSandbox 链接 w3w89k7x8）基于 React 16.x + react-infinite-scroll-component@^6.1.0，而当前主流项目多使用 React 18（尤其是启用了 Concurrent Features）及较新版本的库（如 v6.2+）。关键差异在于：新版要求 scrollableTarget 必须是 可滚动的父容器，且其 scrollTop 初始值需为 0，否则 inverse 检测机制失效。

以下为经验证的修复方案（兼容 React 17/18）：

React Flow Architecture

提供使用 React Flow 构建基于节点的 UI 的架构指导，适用于设计基于流程的应用程序，在状态管理、交互和性能等方面进行决策。

下载

✅ 正确的 DOM 结构与样式

<div
  id="scrollableDiv"
  style={{
    height: 300,
    overflowY: "auto", // 显式声明 overflowY，避免 flex 布局干扰
    display: "flex",
    flexDirection: "column-reverse", // 消息倒序排列
    // ⚠️ 关键：移除 padding/margin，或确保内容高度 > 容器高度
  }}
>
  {/* InfiniteScroll 必须包裹所有消息，且自身不参与 flex 排列 */}
  <InfiniteScroll
    dataLength={this.state.items.length}
    next={this.fetchMoreData}
    hasMore={this.state.hasMore} // 建议用状态控制，而非硬编码 true
    loader={<div style={{ textAlign: "center" }}>Loading...</div>}
    endMessage={
      <p style={{ textAlign: "center", color: "#666" }}>You've reached the top!</p>
    }
    inverse={true}
    scrollableTarget="scrollableDiv"
    // ⚠️ 关键：添加此属性确保首次渲染后自动滚动到底部
    initialScrollY={0}
  >
    {/* 消息列表：保持倒序，但每个 item 的 key 和内容需唯一 */}
    {this.state.items.map((_, index) => (
      <div style={style} key={`msg-${index}`}>
        div - #{this.state.items.length - 1 - index} {/* 视觉序号正向显示 */}
      </div>
    ))}
  </InfiniteScroll>
</div>

✅ 必须满足的三大前提条件

1. scrollableTarget 元素必须可滚动
   确保 #scrollableDiv 的 scrollHeight > clientHeight（即内容实际高度超出容器）。若初始 items 过少（如仅 20 条），可临时增加初始数据或设置最小高度：

   #scrollableDiv::before {
     content: "";
     display: block;
     height: 1px; /* 强制产生滚动条 */
   }

2. inverse={true} 要求容器 scrollTop 初始为 0
   组件挂载后，需手动将滚动条置底（因 flex-direction: column-reverse 会使 scrollTop=0 对应视觉顶部）：

   componentDidMount() {
     const scrollable = document.getElementById("scrollableDiv");
     if (scrollable) {
       // 滚动到底部（视觉上最新消息可见）
       scrollable.scrollTop = scrollable.scrollHeight;
     }
   }
   
   componentDidUpdate(prevProps, prevState) {
     // 新消息追加后自动滚动到底部
     if (this.state.items.length > prevState.items.length) {
       const scrollable = document.getElementById("scrollableDiv");
       if (scrollable) {
         scrollable.scrollTop = scrollable.scrollHeight;
       }
     }
   }

3. 检查版本兼容性

   • react-infinite-scroll-component >= v6.2.0 要求 React 17+
   • 若使用 React 18 的 createRoot，需确认库已适配（推荐 v6.4.0+）
   • 运行 npm list react-infinite-scroll-component react 验证版本匹配

? 调试技巧

• 在 fetchMoreData 开头添加 console.log('Triggered: ', document.getElementById("scrollableDiv")?.scrollTop)，确认是否被调用；
• 检查浏览器开发者工具 Elements 面板，确认 #scrollableDiv 是否有 overflow-y: auto 且 scrollHeight > offsetHeight；
• 临时移除 inverse={true} 测试基础滚动是否工作，排除其他逻辑干扰。

总结：inverse 模式失效的根源常是 DOM 可滚动性未满足或初始滚动位置未校准。与其依赖“自动检测”，不如主动控制 scrollTop 并确保容器高度足够。同时，务必核对 react 与 react-infinite-scroll-component 的版本兼容性——这是多数线上案例失效的隐藏元凶。