react-scroll-synchronize v0.0.1

react-scroll-synchronize

Synced scroll position across multiple scrollable elements

Note This project is fork from https://www.npmjs.com/package/react-scroll-sync to fix some issue. If there are any problem about license, please contact me via vovantrong.dev@gmail.com.

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>

  

);

}

}