1 | # react-scroll-sync
|
2 | Synced scroll position across multiple scrollable elements
|
3 |
|
4 | ## Demo
|
5 |
|
6 | http://react-sync-scroll.netlify.com/
|
7 |
|
8 | ## Documentation & Example
|
9 |
|
10 | http://react-sync-scroll.netlify.com/
|
11 |
|
12 | ## License
|
13 |
|
14 | MIT
|
15 |
|
16 | ## Installation
|
17 |
|
18 | ```bash
|
19 | npm install --save react-scroll-sync
|
20 | ```
|
21 | ## Usage
|
22 |
|
23 | ```jsx
|
24 | import React, {Component} from 'react';
|
25 | import { ScrollSync, ScrollSyncPane } from 'react-scroll-sync';
|
26 |
|
27 | export 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 | ```
|