在React的Ant Design Table中添加顶部新行时如何保留滚动位置？

现有实现代码 #

新增行的useCallback函数 #

const addRow = useCallback(() => {
  setDataSource((prevRows) => [
    { id: prevRows.length + 1, name: `Item ${prevRows.length + 1}` },
    ...prevRows
  ]);
}, []);

定时新增行的useEffect #

useEffect(() => {
  const intervalId = setInterval(addRow, 500);
  return () => clearInterval(intervalId); // 卸载时清除定时器
}, [addRow]);

Ant Design Table组件 #

<Table
  className="table-striped-rows"
  rowKey="id"
  columns={columns}
  dataSource={dataSource}
  pagination={false}
/>

需求说明 #

当Table内容溢出浏览器屏幕后，若用户滚动到下方查看底部的旧行，新行持续添加会导致旧行不断向下滚动，无法正常阅读。需要实现如下效果：

• 仅当用户当前滚动位置处于Table顶部时，新增行才保持视图在顶部
• 若用户滚动到Table下方区域，新增行不会改变当前的滚动位置
• 必须使用Ant Design Table组件实现该效果

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