ReactJS - Get two divs two follow each others scrolling

user_3789829 0
Viewed 268

I have two divs one is master and the other one is slave, I would like slave and master to follow each others scrolling.

master will always have the same width and height but slave can have any width and any height.

Problem: when I start scrolling it triggers an infinite loop because I'm using two useEffects to look at each others scroll percentage and update scrolling accordingly.

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

use-effect react-hooks reactjs javascript
1 Answers

I figured it out, using useEffect hooks was a mistake, because when one position changes the other will as well and this caused an infinite loop. I simply used the onScroll prop and selected the parent node and then the other div within the parent and modified the scroll position that way.

Easiest way to understand is to look at the code: https://codesandbox.io/s/react-js-scroll-sync-ee9wb

user_37898290
Related