React Virtualized无限滚动：列表默认滚动到底部失效求助

我正在使用react-virtualized实现无限滚动，期望页面渲染时列表自动定位至底部，用户向上滚动时加载更多内容。已为List组件添加scrollToIndex={repositories.length}与scrollToAlignment="end"属性，但列表仍默认从顶部开始。请问代码是否存在问题，或需其他方法实现该需求？

代码示例 #

<div className="repositoriesWrapper">
  <AutoSizer disableHeight={true}>
    {({ width }) => (
      <WindowScroller>
        {({ height, isScrolling, onChildScroll, scrollTop }) => (
          <InfiniteLoader
            isRowLoaded={isRowLoaded}
            loadMoreRows={loadMoreRows}
            rowCount={1000}
          >
            {({ onRowsRendered, registerChild }) => (
              <List
                autoHeight
                onRowsRendered={onRowsRendered}
                ref={registerChild}
                scrollToIndex={repositories.length}
                scrollToAlignment="end"
                height={height}
                isScrolling={isScrolling}
                onScroll={onChildScroll}
                rowCount={repositories.length}
                rowHeight={42}
                rowRenderer={rowRenderer}
                scrollTop={scrollTop}
                width={width}
              />
            )}
          </InfiniteLoader>
        )}
      </WindowScroller>
    )}
  </AutoSizer>
  {isNextPageLoading && <span>loading more repositories..</span>}
</div>

你的代码存在两个核心问题，导致列表无法自动滚动到底部：

1. scrollTop属性覆盖了scrollToIndex的作用
   给List组件传递的scrollTop={scrollTop}（来自WindowScroller）优先级高于scrollToIndex，直接强制控制了列表的滚动位置，导致scrollToIndex的设置被忽略。

2. scrollToIndex的取值错误
   列表索引从0开始，repositories.length对应的是超出最后一项的无效位置，应改为repositories.length - 1才能定位到最后一条有效数据。

具体修复步骤 #

方式一：移除scrollTop，优先实现初始滚动到底部

• 移除List组件上的scrollTop={scrollTop}属性；
• 将scrollToIndex的值改为repositories.length > 0 ? repositories.length - 1 : 0；
• 配合useEffect手动触发滚动，确保组件挂载后生效：

import { useRef, useEffect } from 'react';

const listRef = useRef(null);

useEffect(() => {
  if (listRef.current && repositories.length > 0) {
    listRef.current.scrollToIndex({
      index: repositories.length - 1,
      align: 'end'
    });
  }
}, [repositories.length]);

// 修改List的ref，同时保留registerChild的注册
<List
  autoHeight
  onRowsRendered={onRowsRendered}
  ref={(node) => {
    listRef.current = node;
    registerChild(node);
  }}
  scrollToIndex={repositories.length > 0 ? repositories.length - 1 : 0}
  scrollToAlignment="end"
  height={height}
  isScrolling={isScrolling}
  onScroll={onChildScroll}
  rowCount={repositories.length}
  rowHeight={42}
  rowRenderer={rowRenderer}
  width={width}
/>

方式二：保留WindowScroller的滚动同步

如果需要保留WindowScroller的滚动同步功能，可通过状态变量控制首次挂载时不传递scrollTop：

import { useState, useRef, useEffect } from 'react';

const listRef = useRef(null);
const [isFirstMount, setIsFirstMount] = useState(true);

useEffect(() => {
  setIsFirstMount(false);
  if (listRef.current && repositories.length > 0) {
    listRef.current.scrollToIndex({
      index: repositories.length - 1,
      align: 'end'
    });
  }
}, [repositories.length]);

// List组件中动态控制scrollTop的传递
<List
  autoHeight
  onRowsRendered={onRowsRendered}
  ref={(node) => {
    listRef.current = node;
    registerChild(node);
  }}
  scrollToIndex={repositories.length > 0 ? repositories.length - 1 : 0}
  scrollToAlignment="end"
  height={height}
  isScrolling={isScrolling}
  onScroll={onChildScroll}
  rowCount={repositories.length}
  rowHeight={42}
  rowRenderer={rowRenderer}
  scrollTop={isFirstMount ? undefined : scrollTop}
  width={width}
/>

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