# react-scroll-sync

> Synchronize scroll positions across multiple scrollable containers

Latest version **1.0.2** (published 2025-05-20) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-scroll-sync
pnpm add react-scroll-sync
yarn add react-scroll-sync
bun add react-scroll-sync
```

## Health

**Score 35/100 (D)** — status: maintenance-mode.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2025-05-20 |
| First published | 2016-10-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 59.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 441 |
| Author | Andrey Okonetchnikov |
| Maintainers | okonet |

## Links

- npm: https://www.npmjs.com/package/react-scroll-sync
- Repository: https://github.com/okonet/react-scroll-sync
- Homepage: https://github.com/okonet/react-scroll-sync#readme
- Issues: https://github.com/okonet/react-scroll-sync/issues
- npm.io page: https://npm.io/package/react-scroll-sync

## Recent versions

- 1.0.2 (latest) — 2025-05-20
- 1.0.1 — 2025-05-20
- 1.0.0 — 2025-05-20
- 0.11.3 — 2025-04-25
- 0.11.2 — 2023-11-01
- 0.11.1 — 2023-10-24
- 0.11.0 — 2022-06-07
- 0.10.0 — 2022-06-01
- 0.9.0 — 2021-03-16
- 0.8.0 — 2020-06-19
- 0.7.1 — 2020-02-07
- 0.7.0 — 2018-08-14
- 0.6.0 — 2018-08-06
- 0.5.0 — 2018-03-23
- 0.4.1 — 2018-01-30
- … 9 more at https://npm.io/package/react-scroll-sync/versions

## README

# react-scroll-sync

Synced scroll position across multiple scrollable elements

## Demo

https://react-sync-scroll.netlify.app/

## Documentation & Example

https://react-sync-scroll.netlify.app/

## Migration from v0 to v1

If you are upgrading from `react-scroll-sync` v0 to v1, please review the [Migration Guide](./MIGRATION.md).  
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.

## License

MIT

## Installation

```bash
npm install --save react-scroll-sync
```

## Usage

```jsx
import { 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>
  );
};
```

---
_Source: https://npm.io/package/react-scroll-sync · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._