sgauthier
6e64e138e2
All checks were successful
Publish To Prod / deploy_and_publish (push) Successful in 35s
240 lines
8.9 KiB
Markdown
240 lines
8.9 KiB
Markdown
To use ScrollSync you have to wrap your scrollable content (ensure that you have `overflow: auto`
|
|
in CSS) in `ScrollSyncPane` and then wrap everything in `ScrollSync`.
|
|
|
|
If you want to provide a toggle for users to turn the scroll syncing on and off, you can use the `enabled={false}` setting on the `ScrollSync` or `ScrollSyncPane` elements. Note that `<ScrollSync enabled={false}>` disables the scroll syncing for all groups.
|
|
|
|
```
|
|
<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>
|
|
```
|
|
|
|
Sometimes it is useful to attach the `onScroll` event listener to a different node (for example
|
|
to a `document.body`). Use `attachTo` prop for that.
|
|
|
|
Additionally sometimes there is need to use few independent scroll groups inside one ScrollSync.
|
|
Provide an arbitrary group name in the `group` prop to ScrollSyncPane components to limit synchronization to panes with that group name.
|
|
|
|
```
|
|
<ScrollSync>
|
|
<div style={{ display: 'flex', position: 'relative', height: 300 }}>
|
|
<ScrollSyncPane group="one">
|
|
<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 group="two">
|
|
<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 group="one">
|
|
<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>
|
|
|
|
<ScrollSyncPane group="two">
|
|
<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>
|
|
```
|
|
|
|
In some situations, it is also useful for a `ScrollSyncPane` to belong to multiple groups. In these cases, provide an array of group names to the `group` prop.
|
|
|
|
```
|
|
const cellStyle = { minWidth: 200, padding: '.5em 1em', textAlign: 'left', borderLeft: '1px solid white', borderBottom: '1px solid white'};
|
|
|
|
<ScrollSync>
|
|
<div style={{ display: 'flex', position: 'relative', height: 300 }}>
|
|
<table style={{ minWidth: 200, borderCollapse: 'collapse' }}>
|
|
<thead style={{ display: 'block', minWidth: 200, overflow: 'auto', color: 'white', background: 'grey' }}>
|
|
<tr>
|
|
<th style={cellStyle}>Fixed Column Header</th>
|
|
</tr>
|
|
</thead>
|
|
<ScrollSyncPane group="vertical">
|
|
<tbody style={{ display: 'block', minWidth: 200, height: 200, overflowY: 'auto', background: 'lightblue' }}>
|
|
<tr>
|
|
<td style={cellStyle}>Fixed Column, Row 1</td>
|
|
</tr>
|
|
<tr>
|
|
<td style={cellStyle}>Fixed Column, Row 2</td>
|
|
</tr>
|
|
<tr>
|
|
<td style={cellStyle}>Fixed Column, Row 3</td>
|
|
</tr>
|
|
<tr>
|
|
<td style={cellStyle}>Fixed Column, Row 4</td>
|
|
</tr>
|
|
<tr>
|
|
<td style={cellStyle}>Fixed Column, Row 5</td>
|
|
</tr>
|
|
<tr>
|
|
<td style={cellStyle}>Fixed Column, Row 6</td>
|
|
</tr>
|
|
<tr>
|
|
<td style={cellStyle}>Fixed Column, Row 7</td>
|
|
</tr>
|
|
<tr>
|
|
<td style={cellStyle}>Fixed Column, Row 8</td>
|
|
</tr>
|
|
<tr>
|
|
<td style={cellStyle}>Fixed Column, Row 9</td>
|
|
</tr>
|
|
<tr>
|
|
<td style={cellStyle}>Fixed Column, Row 10</td>
|
|
</tr>
|
|
<tr>
|
|
<td style={cellStyle}>Fixed Column, Row 11</td>
|
|
</tr>
|
|
<tr>
|
|
<td style={cellStyle}>Fixed Column, Row 12</td>
|
|
</tr>
|
|
</tbody>
|
|
</ScrollSyncPane>
|
|
</table>
|
|
<table style={{ width: 400, borderCollapse: 'collapse' }}>
|
|
<ScrollSyncPane group="horizontal">
|
|
<thead style={{ display: 'block', width: 400, overflow: 'auto', color: 'white', background: 'black' }}>
|
|
<tr>
|
|
<th style={cellStyle}>Table 2 - Header 1</th>
|
|
<th style={cellStyle}>Table 2 - Header 2</th>
|
|
<th style={cellStyle}>Table 2 - Header 3</th>
|
|
</tr>
|
|
</thead>
|
|
</ScrollSyncPane>
|
|
<ScrollSyncPane group={["horizontal", "vertical"]}>
|
|
<tbody style={{ display: 'block', width: 400, height: 200, overflow: 'auto', background: 'pink' }}>
|
|
<tr>
|
|
<td style={cellStyle}>Cell 1, Row 1</td>
|
|
<td style={cellStyle}>Cell 2, Row 1</td>
|
|
<td style={cellStyle}>Cell 3, Row 1</td>
|
|
</tr>
|
|
<tr>
|
|
<td style={cellStyle}>Cell 1, Row 2</td>
|
|
<td style={cellStyle}>Cell 2, Row 2</td>
|
|
<td style={cellStyle}>Cell 3, Row 2</td>
|
|
</tr>
|
|
<tr>
|
|
<td style={cellStyle}>Cell 1, Row 3</td>
|
|
<td style={cellStyle}>Cell 2, Row 3</td>
|
|
<td style={cellStyle}>Cell 3, Row 3</td>
|
|
</tr>
|
|
<tr>
|
|
<td style={cellStyle}>Cell 1, Row 4</td>
|
|
<td style={cellStyle}>Cell 2, Row 4</td>
|
|
<td style={cellStyle}>Cell 3, Row 4</td>
|
|
</tr>
|
|
<tr>
|
|
<td style={cellStyle}>Cell 1, Row 5</td>
|
|
<td style={cellStyle}>Cell 2, Row 5</td>
|
|
<td style={cellStyle}>Cell 3, Row 5</td>
|
|
</tr>
|
|
<tr>
|
|
<td style={cellStyle}>Cell 1, Row 6</td>
|
|
<td style={cellStyle}>Cell 2, Row 6</td>
|
|
<td style={cellStyle}>Cell 3, Row 6</td>
|
|
</tr>
|
|
<tr>
|
|
<td style={cellStyle}>Cell 1, Row 7</td>
|
|
<td style={cellStyle}>Cell 2, Row 7</td>
|
|
<td style={cellStyle}>Cell 3, Row 7</td>
|
|
</tr>
|
|
<tr>
|
|
<td style={cellStyle}>Cell 1, Row 8</td>
|
|
<td style={cellStyle}>Cell 2, Row 8</td>
|
|
<td style={cellStyle}>Cell 3, Row 8</td>
|
|
</tr>
|
|
<tr>
|
|
<td style={cellStyle}>Cell 1, Row 9</td>
|
|
<td style={cellStyle}>Cell 2, Row 9</td>
|
|
<td style={cellStyle}>Cell 3, Row 9</td>
|
|
</tr>
|
|
<tr>
|
|
<td style={cellStyle}>Cell 1, Row 10</td>
|
|
<td style={cellStyle}>Cell 2, Row 10</td>
|
|
<td style={cellStyle}>Cell 3, Row 10</td>
|
|
</tr>
|
|
<tr>
|
|
<td style={cellStyle}>Cell 1, Row 11</td>
|
|
<td style={cellStyle}>Cell 2, Row 11</td>
|
|
<td style={cellStyle}>Cell 3, Row 11</td>
|
|
</tr>
|
|
<tr>
|
|
<td style={cellStyle}>Cell 1, Row 12</td>
|
|
<td style={cellStyle}>Cell 2, Row 12</td>
|
|
<td style={cellStyle}>Cell 3, Row 12</td>
|
|
</tr>
|
|
</tbody>
|
|
</ScrollSyncPane>
|
|
</table>
|
|
</div>
|
|
</ScrollSync>
|
|
```
|