useSyncScroll

A custom React hook for synchronized, proportional, horizontal and/or vertical DOM element scrolling.

DEMO

Install

With npm:

npm install react-use-sync-scroll

With Yarn:

yarn add react-use-sync-scroll

In a browser:

<script src="https://unpkg.com/react-use-sync-scroll/dist/index.js"></script>

Use

The hook accepts two arguments:

• A ref of refs (at least 2) of elements to synchronize
• An options object to define whether to synchronize horizontal or vertical scrolling (both default to false)

For example:

import useSyncScroll from 'react-use-sync-scroll';

function SomeComponent() {
  // Make a ref for each element to synchronize
  const ref1 = React.useRef(null);
  const ref2 = React.useRef(null);
  const ref3 = React.useRef(null);

  // Combine them into a single array ref
  const refsRef = React.useRef([ref1, ref2, ref3]);

  // Use the hook
  useSyncScroll(refsRef, { vertical: true, horizontal: false });

  // Render
  return (
    <div>
      <div ref={ref1}>...</div>
      <div ref={ref2}>...</div>
      <div ref={ref3}>...</div>
    </div>
  );
}

License

MIT

Author

Angelos Orfanakos