Wondering what’s next for npm?Check out our public roadmap! »

    react-scroll-sync
    DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/react-scroll-sync package

    0.9.0 • Public • Published

    react-scroll-sync

    Synced scroll position across multiple scrollable elements

    Demo

    http://react-sync-scroll.netlify.com/

    Documentation & Example

    http://react-sync-scroll.netlify.com/

    License

    MIT

    Installation

    npm install --save react-scroll-sync

    Usage

    import React, {Component} from 'react';
    import { ScrollSync, ScrollSyncPane } from 'react-scroll-sync';
    
    export default class MyComponent extends Component {
        
        render() {
          <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>
    
            );
        }
    }

    Keywords

    none

    Install

    npm i react-scroll-sync

    DownloadsWeekly Downloads

    61,712

    Version

    0.9.0

    License

    MIT

    Unpacked Size

    130 kB

    Total Files

    15

    Last publish

    Collaborators

    • avatar