将元素位置固定到页面上的另一个非父/兄弟元素（反应）

Question

我有一个带有多个元素的可滚动容器。我希望每个元素都有一个位于其旁边但在容器外部的菜单。问题是我使用的是react custom scrollbar，所以容器有overflow: hidden。

打开（滚动）时，菜单（绿色）应跟随元素（红色）的位置。

也许有一种方法可以通过在每个子组件中获取getboundingclientrect并将它们在菜单open和onScroll上传递给父组件来实现，但是这种解决方案并不是真正的最佳选择，因为它会强制执行许多状态更新。父母，通常有点。是否有解决方案以更简单，更稳定的方式实现这一目标？