react-virtualized中List组件scrollToIndex失效，触发后屏幕空白

结合你使用的组件组合（InfiniteLoader + WindowScroller + Autosizer + CellMeasurer + List），导致空白的核心原因通常是以下两点：

1. 目标索引对应的行未被InfiniteLoader加载，List无法渲染该行，滚动后无内容显示；
2. CellMeasurer的高度缓存未命中，且WindowScroller与List的滚动控制存在冲突，导致滚动位置计算错误。

具体修复步骤： #

1. 确保目标行在滚动前已被加载

调用scrollToIndex之前，先检查目标行是否已被加载，如果未加载则手动触发loadMoreRows，等待加载完成后再执行滚动：

// 给List添加ref用于调用scrollToIndex
this.listRef = React.createRef();

scrollToRow = async () => {
  const index = parseInt(this.input.value, 10);
  const { isRowLoaded, loadMoreRows, batchSize } = this.props;

  // 检查目标行是否已被加载
  if (!isRowLoaded(index)) {
    // 计算目标行所在的批次范围
    const batchStart = Math.floor(index / batchSize) * batchSize;
    const batchEnd = batchStart + batchSize - 1;
    // 加载该批次的行
    await loadMoreRows({ startIndex: batchStart, stopIndex: batchEnd });
  }

  // 执行滚动，指定对齐方式确保行可见
  this.listRef.current.scrollToIndex({
    index,
    align: 'top' // 可选值：'auto' | 'top' | 'bottom' | 'center'
  });
};

2. 优化CellMeasurerCache配置

确保缓存的默认高度与实际行高接近，避免滚动位置计算偏差：

// 初始化CellMeasurerCache时设置合理的默认高度
const cache = new CellMeasurerCache({
  defaultHeight: 60, // 替换为你的行的平均高度
  fixedWidth: true, // 如果行宽度固定，设为true提升性能
});

3. 处理WindowScroller与List的滚动冲突

当使用WindowScroller时，它会接管窗口滚动并同步到List的scrollTop，手动调用scrollToIndex可能会触发冲突。可以通过临时禁用WindowScroller的自动控制来解决：

state = {
  isManualScroll: false,
};

scrollToRow = async () => {
  this.setState({ isManualScroll: true });
  // ... 前面的加载和滚动逻辑
  // 滚动完成后延迟恢复自动控制，给List足够的渲染时间
  setTimeout(() => {
    this.setState({ isManualScroll: false });
  }, 500);
};

// 在WindowScroller的children回调中，根据状态决定是否传递scrollTop
<WindowScroller>
  {({ height, isScrolling, scrollTop }) => (
    <Autosizer>
      {({ width }) => (
        <InfiniteLoader
          // ... 你的InfiniteLoader配置
        >
          {({ onRowsRendered, registerChild }) => (
            <List
              ref={this.listRef}
              // 只有非手动滚动时，才使用WindowScroller的scrollTop
              scrollTop={this.state.isManualScroll ? undefined : scrollTop}
              width={width}
              height={height}
              // ... 其他List配置
            />
          )}
        </InfiniteLoader>
      )}
    </Autosizer>
  )}
</WindowScroller>

额外注意事项 #

• 确保List组件的estimatedRowHeight属性设置合理，这会影响滚动位置的预计算；
• 如果行高是动态变化的，确保CellMeasurer正确包裹每一行，并且cache能正确缓存行高；
• 避免在组件挂载初期立即调用scrollToIndex，确保所有组件都完成初始化和渲染。

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