如何实现AGGrid按像素精确滚动而非按行索引？

以下是比直接操作ag-body-viewport更可靠的实现思路，基于AGGrid官方API避免依赖内部DOM结构：

1. 使用AGGrid官方API设置滚动位置 #

AGGrid提供了setVerticalScrollPosition方法，可直接设置垂直滚动的像素值，这是官方支持的精确滚动方式，比手动修改DOM元素的scrollTop更稳定：

// 同步AGGrid滚动到指定像素位置（比如从D3图表的scrollTop获取值）
gridApi.setVerticalScrollPosition(targetScrollTop);

同时可以监听AGGrid的滚动事件，同步到D3图表：

// 初始化同步标记，避免循环触发
let isSyncingFromAGGrid = false;
let isSyncingFromD3 = false;

// 监听AGGrid的滚动事件，同步到D3图表
gridApi.addEventListener('bodyScroll', (event) => {
  if (!isSyncingFromD3) {
    isSyncingFromAGGrid = true;
    // 将AGGrid的滚动像素值同步到D3图表容器
    d3ChartContainer.scrollTop = event.top;
    isSyncingFromAGGrid = false;
  }
});

// 监听D3图表容器的滚动事件，同步到AGGrid
d3ChartContainer.addEventListener('scroll', () => {
  if (!isSyncingFromAGGrid) {
    isSyncingFromD3 = true;
    gridApi.setVerticalScrollPosition(d3ChartContainer.scrollTop);
    isSyncingFromD3 = false;
  }
});

2. 基于行位置计算精确滚动（如果需要基于行定位） #

如果需要滚动到某行的精确位置，可以结合AGGrid的getRowNode和getRowElement方法获取行的像素偏移，再通过setVerticalScrollPosition实现：

// 获取目标行的rowNode
const rowNode = gridApi.getRowNode(rowId);
if (rowNode) {
  // 获取行元素的DOM节点
  const rowElement = rowNode.getRowElement();
  // 获取行元素相对于AGGrid视口的顶部偏移
  const rowTop = rowElement.offsetTop;
  // 设置滚动位置
  gridApi.setVerticalScrollPosition(rowTop);
}

3. 关键注意事项 #

双向同步时必须添加状态标记（如isSyncingFromAGGrid、isSyncingFromD3），防止AGGrid和D3的滚动事件互相触发，导致无限循环和性能问题。

为什么不推荐直接操作ag-body-viewport？ #

直接修改该DOM元素的scrollTop依赖AGGrid的内部DOM结构，AGGrid版本升级后可能会调整类名或DOM层级，导致代码失效；而使用官方API则能保证跨版本的兼容性。

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