数据网格 - 滚动

本节介绍如何以编程方式控制滚动。

滚动到特定单元格

您可以通过调用 apiRef.current.scrollToIndexes() 滚动到特定单元格。唯一必须传递的参数是一个对象，其中包含要滚动到的单元格的行索引和列索引。如果行索引或列索引不存在，则数据网格将不会在缺失的轴上进行任何移动。

以下演示展示了此 API 的用法

滚动恢复

您可以通过定义 initialState.scroll 值 { top: number, left: number } 来恢复到之前的滚动位置。数据网格将在指定的像素滚动偏移量处挂载。

以下演示展示了滚动恢复的用法

<Box sx={{ height: 400 }}>
  <DataGridPro
    apiRef={apiRef}
    onCellClick={handleCellClick}
    hideFooter
    loading={loading}
    {...data}
    initialState={{
      ...data.initialState,
      scroll: { top: 1000, left: 1000 },
    }}
  />
</Box>

<Box sx={{ height: 400 }}>
  <DataGridPro
    apiRef={apiRef}
    onCellClick={handleCellClick}
    hideFooter
    loading={loading}
    {...data}
    initialState={{
      ...data.initialState,
      scroll: { top: 1000, left: 1000 },
    }}
  />
</Box>

按 Enter 开始编辑

apiRef

网格公开了一组方法，可以使用命令式的 apiRef 启用所有这些功能。要了解有关如何使用它的更多信息，请查看 API 对象部分。

getScrollPosition()

返回当前滚动位置。

签名

getScrollPosition: () => GridScrollParams

scroll()

触发视口滚动到给定的位置（以像素为单位）。

签名

scroll: (params: Partial<GridScrollParams>) => void

scrollToIndexes()

触发视口滚动到由 params 给出的索引处的单元格。如果网格必须滚动才能到达目标，则返回 true。

签名

scrollToIndexes: (params: Partial<GridCellIndexCoordinates>) => boolean