UNPKG

2.21 kBMarkdownView Raw
1# react-scroll-sync
2Synced scroll position across multiple scrollable elements
3
4## Demo
5
6http://react-sync-scroll.netlify.com/
7
8## Documentation & Example
9
10http://react-sync-scroll.netlify.com/
11
12## License
13
14MIT
15
16## Installation
17
18```bash
19npm install --save react-scroll-sync
20```
21## Usage
22
23```jsx
24import React, {Component} from 'react';
25import { ScrollSync, ScrollSyncPane } from 'react-scroll-sync';
26
27export default class MyComponent extends Component {
28
29 render() {
30 <ScrollSync>
31 <div style={{ display: 'flex', position: 'relative', height: 300 }}>
32 <ScrollSyncPane>
33 <div style={{overflow: 'auto'}}>
34 <section style={{ height: 500 }}>
35 <h1>Left Pane Content</h1>
36 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aperiam doloribus
37 dolorum
38 est eum eveniet exercitationem iste labore minus, neque nobis odit officiis omnis
39 possimus quasi rerum sed soluta veritatis.</p>
40 </section>
41 </div>
42 </ScrollSyncPane>
43
44 <ScrollSyncPane>
45 <div style={{overflow: 'auto'}}>
46 <section style={{ height: 1000 }}>
47 <h1>Middle Pane Content</h1>
48 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aperiam doloribus
49 dolorum
50 est eum eveniet exercitationem iste labore minus, neque nobis odit officiis omnis
51 possimus quasi rerum sed soluta veritatis.</p>
52 </section>
53 </div>
54 </ScrollSyncPane>
55
56 <ScrollSyncPane>
57 <div style={{overflow: 'auto'}}>
58 <section style={{ height: 2000 }}>
59 <h1>Right Pane Content</h1>
60 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aperiam doloribus
61 dolorum
62 est eum eveniet exercitationem iste labore minus, neque nobis odit officiis omnis
63 possimus quasi rerum sed soluta veritatis.</p>
64 </section>
65 </div>
66 </ScrollSyncPane>
67 </div>
68 </ScrollSync>
69
70 );
71 }
72}
73```