使用react-infinite-scroll-component反向加载时页面跳底问题求助

反向布局（flex-direction: column-reverse）下加载新数据时页面跳底，核心原因是新数据加入后容器总高度变化，浏览器自动调整滚动位置导致偏移。以下是具体解决步骤：

1. 绑定滚动容器的正确Ref #

确保scrollableDiv ref绑定到最外层的滚动容器（而非InfiniteScroll组件）：

const scrollableDiv = useRef(null);

// 外层滚动容器绑定ref
<div
  id="scrollableDiv"
  ref={scrollableDiv}
  style={{
    flex: 1,
    overflow: "auto",
    display: "flex",
    flexDirection: "column-reverse",
  }}
>
  {/* 内部组件 */}
</div>

2. 加载前记录滚动偏移 #

在调用接口获取数据前，保存当前滚动位置的相对偏移：

// 修改onScroll回调逻辑
onScroll={e => {
  e.preventDefault();
  const container = scrollableDiv.current;
  if (!container) return;

  const { scrollHeight, scrollTop, clientHeight } = container;
  // 反向布局下scrollTop为0表示到达视觉顶部
  if (scrollTop === 0) {
    // 记录当前滚动位置相对于容器底部的偏移
    window.prevScrollOffset = scrollHeight - scrollTop - clientHeight;
    onFetchPreviousMessages();
  }
}}

3. 加载后恢复滚动位置 #

用useEffect监听数据变化，数据更新后重置滚动位置：

useEffect(() => {
  const container = scrollableDiv.current;
  if (!container || !window.prevScrollOffset) return;

  // 计算新的scrollTop，保持浏览位置不变
  const newScrollTop = container.scrollHeight - container.clientHeight - window.prevScrollOffset;
  container.scrollTop = newScrollTop;

  // 清空偏移记录
  window.prevScrollOffset = null;
}, [messageGroups]);

4. 简化InfiniteScroll配置 #

移除组件上重复的id和ref，仅保留滚动目标配置：

<InfiniteScroll
  dataLength={messageGroups.length}
  onScroll={/* 上述修改后的回调 */}
  style={{ display: "flex", flexDirection: "column-reverse" }}
  scrollableTarget="scrollableDiv"
  hasMore={hasMore} // 根据你的分页逻辑添加该属性
  loader={<div>加载中...</div>} // 可选加载提示
/>

核心逻辑说明 #

反向布局中，容器的scrollTop=0对应视觉顶部（原始容器的底部）。新数据加入后容器高度增加，浏览器默认保持scrollTop不变，导致视觉上跳到底部。通过记录加载前的相对偏移，加载后计算并设置新的scrollTop，就能固定用户的浏览位置。

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