如何确保滚动事件以适当的频率触发？

Question

我正在实现一个数据透视表，它有 3 个部分：数据透视主体、行标题和列标题。

我已经在它们之间实现了滚动同步。也就是说，如果我滚动枢轴主体，行标题和列标题将相应地滚动。反之亦然。

现在我使用 tanstack/react-virtual 将虚拟化引入到数据透视体（如果我可以使用另一个库解决这个问题，我就不必使用这个库）。然后我就遇到了这个问题。

当我在枢轴主体上滚动时，滚动事件的触发频率较低，因此行/列标题的滚动会滞后。

这是我提到的虚拟实现：https://codesandbox.io/p/devbox/tender-volhard-3srpx7。在这个codesandbox示例中，延迟并不明显，但您仍然可以看到有一点延迟。在我的 React 应用程序中，滞后非常明显。

我想知道尽管枢轴体上有虚拟化，是否有办法保持滚动同步。谢谢！

之前

之后

Answer 1

启用虚拟化后，DOM 中仅渲染可见项，不可见项的空间根据总行数和列数计算。这种方法不会一次渲染所有元素，从而有助于优化性能。

但是，您观察到的延迟之所以会发生，是因为当您滚动时，DOM 需要少量时间（毫秒）来渲染和重新渲染虚拟化表的单元格。这在快速滚动时尤其明显，因为滚动事件的触发频率高于 DOM 赶上渲染元素所需的时间。