ReactJS - 获取两个 div 两个互相跟随滚动

Posted 2023-03-17

【中文标题】ReactJS - 获取两个 div 两个互相跟随滚动

【英文标题】：ReactJS - Get two divs two follow each others scrolling

【发布时间】：2022-01-16 05:08:24

【问题描述】：

我有两个div，一个是master，一个是slave，我希望slave和master互相跟随滚动。

master 将始终具有相同的宽度和高度，但 slave 可以具有任何宽度和高度。

问题：当我开始滚动时，它会触发一个无限循环，因为我使用两个 useEffects 来查看彼此的滚动百分比并相应地更新滚动。

沙盒：https://codesandbox.io/s/xenodochial-feather-3teev?file=/src/App.js

【问题讨论】：

我明白问题在于，当从属更改时更新主控，当主控更改更新从属时，这会导致无限循环，但我该如何解决这个问题？

【参考方案1】：

我想通了，使用 useEffect 钩子是一个错误，因为当一个位置发生变化时，另一个位置也会发生变化，这会导致无限循环。我只是使用了 onScroll 属性并选择了父节点，然后选择了父节点中的另一个 div 并以这种方式修改了滚动位置。

最容易理解的方法是看代码：https://codesandbox.io/s/react-js-scroll-sync-ee9wb

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。