synchronise scroll of two react components without using state and actions

Question

I am trying to sync scroll of two different components in React so that if I scroll one in one component the other component will also scroll. The two are in different ratios so I have to calculate to offsets every time.

I don't want to use state and actions (I am using redux) since it hurts my performance due to re-rendering every mouse scroll (I also tried debouncing/throttling).

I have a wrapper component which renders two other components like so:

class Wrapper extends React.Component {
  render() {
    return (
      <div>
        <FirstComponent />
        <SecondComponent />
      </div>
    );
  }
}

I tried to use ref but it doesn't work on custom components (I get undefined) and in any case this all looks like an anti-pattern for react/redux.

Any suggestion on how to achieve that without hurting performance and staying as close as possible to the React/Redux patterns?

Answer 1

For similar questions in the future you can look at: react-scroll-sync, which saved my work with very complex table syncing case.

A short example how to use:

<ScrollSync>
<div style={{ display: 'flex', position: 'relative', height: 300 }}>
  <ScrollSyncPane>
    <div style={{overflow: 'auto'}}>
      <section style={{ height: 500 }}>
        <h1>Left Pane Content</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aperiam doloribus
          dolorum
          est eum eveniet exercitationem iste labore minus, neque nobis odit officiis omnis
          possimus quasi rerum sed soluta veritatis.</p>
      </section>
    </div>
  </ScrollSyncPane>

  <ScrollSyncPane>
    <div style={{overflow: 'auto'}}>
      <section style={{ height: 1000 }}>
        <h1>Middle Pane Content</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aperiam doloribus
          dolorum
          est eum eveniet exercitationem iste labore minus, neque nobis odit officiis omnis
          possimus quasi rerum sed soluta veritatis.</p>
      </section>
    </div>
  </ScrollSyncPane>

</div>
</ScrollSync>

Answer 2

I have created this library recently, that solves your issue

All you need is to:

1. make <ScrollSync> as a common parent to your nodes you want to sync scroll with other nodes (which is a React component that uses React's new Context API)
2. and then wrap each scrollable-node with a <ScrollSyncNode>

and then the sync happens :D

check this codesandbox