Synced scroll position across multiple scrollable elements
https://react-sync-scroll.netlify.app/
https://react-sync-scroll.netlify.app/
If you are upgrading from react-scroll-sync v0 to v1, please review the Migration Guide.
Version 1.0.0 and above provide built-in TypeScript type definitions, so you must uninstall the community @types/react-scroll-sync package to avoid type conflicts. The guide includes all required steps to ensure a smooth upgrade.
MIT
npm install --save react-scroll-syncimport { FC } from "react";
import { ScrollSync, ScrollSyncPane } from "react-scroll-sync";
export const MyComponent: FC = () => {
return (
<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>
<ScrollSyncPane>
<div style={{ overflow: "auto" }}>
<section style={{ height: 2000 }}>
<h1>Right 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>
);
};