react-virtualized List组件更新数据时滚动条自动跳顶如何解决

react-virtualized 的 List 组件基于 scrollTop 值计算可视区域渲染内容，默认以列表顶部（scrollTop=0）作为渲染起点。当你向 logArray 头部追加更早的历史日志时，列表总高度会在顶部新增对应条数的内容高度，但组件本身不会自动修正 scrollTop 值，原有 scrollTop 对应的渲染位置会直接落在新增内容的顶部，视觉上就表现为滚动位置自动跳转到列表最顶部。

核心思路是前置追加内容前后手动维护滚动位置，抵消顶部新增内容带来的高度偏移，保证用户当前可视区域的内容不发生位移。

实现步骤 #

• 给 List 组件绑定 ref，获取组件实例以调用滚动控制API
• 触发历史日志加载、更新logArray之前，记录当前的 scrollTop 值、当前已加载的日志总条数
• 计算本次前置追加的日志对应的总高度：固定行高场景直接用 新增条数 * 单条行高，动态行高场景提前计算新增批次所有日志的行高总和
• logArray 更新完成、List 重绘结束后，调用实例的 scrollToPosition 方法，将滚动位置设置为 原scrollTop + 新增内容总高度，即可保持用户当前浏览位置完全不变

核心代码示例 #

import { List } from 'react-virtualized';
import { useRef, useState, useCallback } from 'react';

const LOG_BATCH_SIZE = 10;
const ROW_HEIGHT = 24; // 单条日志固定行高，动态行高可替换为实际计算逻辑

const LogContainer = () => {
  const listRef = useRef(null);
  const [logArray, setLogArray] = useState([]);
  // 存储追加前的滚动状态
  const scrollStateRef = useRef({ scrollTop: 0, prevLogCount: 0 });

  // 加载更早的历史日志
  const loadOlderLogs = useCallback(async () => {
    // 拉取日志前记录当前滚动状态
    if (listRef.current) {
      const currentScrollTop = listRef.current.Grid.scrollTop;
      scrollStateRef.current = {
        scrollTop: currentScrollTop,
        prevLogCount: logArray.length
      };
    }
    // 拉取上一批次历史日志
    const olderLogs = await fetchPrevLogBatch();
    setLogArray([...olderLogs, ...logArray]);
  }, [logArray]);

  // 列表重绘完成后修正滚动位置
  const handleRowsRendered = useCallback(() => {
    const { scrollTop, prevLogCount } = scrollStateRef.current;
    const addedCount = logArray.length - prevLogCount;
    // 无新增内容时不做调整
    if (addedCount <= 0 || !listRef.current) return;
    // 计算新增内容总高度，动态行高场景替换为新增行的实际总高度
    const addedHeight = addedCount * ROW_HEIGHT;
    listRef.current.scrollToPosition(scrollTop + addedHeight);
    // 重置状态避免重复调整
    scrollStateRef.current = { scrollTop: 0, prevLogCount: 0 };
  }, [logArray]);

  const rowRenderer = ({ index, key, style }) => (
    <div key={key} style={style}>
      {logArray[index]}
    </div>
  );

  return (
    <List
      ref={listRef}
      width={800}
      height={5 * ROW_HEIGHT} // 可视区域展示5条日志
      rowCount={logArray.length}
      rowHeight={ROW_HEIGHT}
      rowRenderer={rowRenderer}
      onRowsRendered={handleRowsRendered}
    />
  );
};

• 初始加载最新一批日志时，不需要执行偏移修正，保持默认滚动到顶部（即最新日志的起始位置）即可
• 若检测到用户当前已经滚动到列表最底部浏览最新日志，加载历史日志时可跳过偏移修正，保持用户在底部的浏览状态，判断逻辑为：当前scrollTop + 可视区域高度 >= 列表总高度
• 动态行高场景不要使用固定行高计算偏移，否则会出现位置偏移不准的问题，可通过 react-virtualized 提供的 CellMeasurer 提前计算新增行的总高度

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