【问题标题】:ReactJS - Get two divs two follow each others scrollingReactJS - 获取两个 div 两个互相跟随滚动
【发布时间】: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

【问题讨论】:

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

标签: javascript reactjs react-hooks use-effect


【解决方案1】:

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

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

【讨论】:

  • 您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息,例如引用或文档,以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center
猜你喜欢
  • 2011-12-16
  • 2021-09-10
  • 1970-01-01
  • 2014-07-23
  • 2013-08-20
  • 1970-01-01
  • 2022-06-29
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多