在React中使用绝对定位的元素进行不稳定的滚动

Question

我在一个绝对定位的父元素中有许多绝对定位的元素。我想使用React中的onWheel事件直接控制滚动。问题是，当我有太多元素时，滚动会变得不连贯。如果我将其留给浏览器，而不是使用onWheel来手动控制滚动，那么滚动就像黄油一样平滑。

这是一个代码沙箱，因此您可以了解我的意思。在右侧窗口中的任意位置滚动以查看断断续续。如果您转到代码的底部，并将行ReactDOM.render(<ManualScroll />, rootElement);更改为ReactDOM.render(<DefaultScroll />, rootElement);，则断断续续消失。如果您使用的是Mac，则可能需要在系统设置中禁用“在页面之间滑动”触控板设置。

https://codesandbox.io/s/nnnz3nr27l

如何在保持对滚动的直接控制的同时达到这种平滑度？

这是我尝试过的：

• 在translate3d类和graph类上都使用node而不是翻译
• 取消onWheel事件
• 使用window.requestAnimationFrame更新位置，而不是直接在onWheel处理程序中完成