0.11.2 • Published 6 months ago
react-scroll-sync v0.11.2
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>
);
}
}
0.11.1
6 months ago
0.11.2
6 months ago
0.10.0
2 years ago
0.11.0
2 years ago
0.9.0
3 years ago
0.8.0
4 years ago
0.7.1
4 years ago
0.7.0
6 years ago
0.6.0
6 years ago
0.5.0
6 years ago
0.4.1
6 years ago
0.4.0
6 years ago
0.3.2
7 years ago
0.3.1
7 years ago
0.3.0
7 years ago
0.2.1
7 years ago
0.2.0
7 years ago
0.1.2
7 years ago
0.1.1
8 years ago
0.1.0
8 years ago