agorf
useSyncScroll
A custom React hook for synchronized, proportional, horizontal and/or vertical DOM element scrolling.
Install
With npm:
npm install react-use-sync-scrollWith Yarn:
yarn add react-use-sync-scrollIn 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
horizontalorverticalscrolling (both default tofalse)
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>
);
}