react-multi-scroll-sync

React Multi Scroll Sync

A React library for synchronizing scroll positions between multiple scroll containers.

Installation

npm install react-multi-scroll-sync

Usage

Basic Setup

import { ScrollSyncProvider, DOMScrollSyncPane } from 'react-multi-scroll-sync';

function App() {
  return (
    <ScrollSyncProvider>
      <div style={{ display: 'flex' }}>
        <DOMScrollSyncPane paneId="list-1" style={{ height: '400px', overflow: 'auto' }}>
          {items.map((item, index) => (
            <div key={index}>{item}</div>
          ))}
        </DOMScrollSyncPane>
        
        <DOMScrollSyncPane paneId="list-2" style={{ height: '400px', overflow: 'auto' }}>
          {items.map((item, index) => (
            <div key={index}>{item}</div>
          ))}
        </DOMScrollSyncPane>
      </div>
    </ScrollSyncProvider>
  );
}

Virtual Lists

import { VirtualScrollSyncPane } from 'react-multi-scroll-sync';
import { FixedSizeList } from 'react-window';

function VirtualExample() {
  return (
    <VirtualScrollSyncPane paneId="virtual-list">
      {(setHandle, onScroll) => (
        <FixedSizeList
          ref={setHandle}
          onScroll={onScroll}
          height={400}
          itemCount={1000}
          itemSize={50}
        >
          {({ index, style }) => (
            <div style={style}>Item {index}</div>
          )}
        </FixedSizeList>
      )}
    </VirtualScrollSyncPane>
  );
}

API

ScrollSyncProvider

<ScrollSyncProvider 
  enabled={true}        // Enable/disable sync
  throttleMs={16}       // Throttle interval
  tolerance={1.5}       // Bottom detection tolerance
>

DOMScrollSyncPane

<DOMScrollSyncPane paneId="unique-id">
  {/* scrollable content */}
</DOMScrollSyncPane>

VirtualScrollSyncPane

<VirtualScrollSyncPane paneId="unique-id">
  {(setHandle, onScroll) => (
    // Your virtual list component
  )}
</VirtualScrollSyncPane>

License

MIT