okonet / React Scroll Sync
Licence: mit
Synced scroll position across multiple scrollable elements
Stars: ✭ 252
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to React Scroll Sync
Motus
Animation library that mimics CSS keyframes when scrolling.
Stars: ✭ 502 (+99.21%)
Mutual labels: scroll, dom
Ffsubsync
Automagically synchronize subtitles with video.
Stars: ✭ 5,167 (+1950.4%)
Mutual labels: sync, synchronization
Kinto.js
An Offline-First JavaScript Client for Kinto.
Stars: ✭ 268 (+6.35%)
Mutual labels: sync, synchronization
Gitconverter
Синхронизация хранилища конфигурации "1С:Предприятия" с репозиторием Git и последующим переходом на разработку в 1C:Enterprise Development Tools (1C:EDT) с сохранением истории
Stars: ✭ 149 (-40.87%)
Mutual labels: sync, synchronization
Scrollmonitor
A simple and fast API to monitor elements as you scroll
Stars: ✭ 3,250 (+1189.68%)
Mutual labels: scroll, dom
Ipfs Sync
Live IPFS directory synchronization.
Stars: ✭ 16 (-93.65%)
Mutual labels: sync, synchronization
locize-cli
locize cli to import / export locales, add / edit / remove sync segments
Stars: ✭ 44 (-82.54%)
Mutual labels: sync, synchronization
Cloudcore
Framework that enables syncing between iCloud (CloudKit) and Core Data
Stars: ✭ 146 (-42.06%)
Mutual labels: sync, synchronization
Outlookgooglecalendarsync
Sync your Outlook and Google calendars
Stars: ✭ 1,113 (+341.67%)
Mutual labels: sync, synchronization
scrollparent.js
A function to get the scrolling parent of an html element.
Stars: ✭ 51 (-79.76%)
Mutual labels: dom, scroll
Remotestorage.js
⬡ JavaScript client library for integrating remoteStorage in apps
Stars: ✭ 2,155 (+755.16%)
Mutual labels: sync, synchronization
S4
🔄 Fast and cheap synchronisation of files using Amazon S3
Stars: ✭ 69 (-72.62%)
Mutual labels: sync, synchronization
Dotmim.sync
A brand new database synchronization framework, multi platform, multi databases, developed on top of .Net Standard 2.0. https://dotmimsync.readthedocs.io/
Stars: ✭ 406 (+61.11%)
Mutual labels: sync, synchronization
node-v
🔒 Secure ❄️ Synchronized ⚡️ Realtime ☁️ Cloud 🌈 Native JavaScript Variables & Events
Stars: ✭ 27 (-89.29%)
Mutual labels: sync, synchronization
Monstache
a go daemon that syncs MongoDB to Elasticsearch in realtime
Stars: ✭ 736 (+192.06%)
Mutual labels: sync, synchronization
synchly
Automate database backups with customizable recurring schedules.
Stars: ✭ 27 (-89.29%)
Mutual labels: sync, synchronization
code-sync
Collaborative cloud platform for students, teachers, and professionals.
Stars: ✭ 28 (-88.89%)
Mutual labels: sync, synchronization
Syncthing Macos
Frugal and native macOS Syncthing application bundle
Stars: ✭ 1,096 (+334.92%)
Mutual labels: sync, synchronization
Rats
Movie Ratings Synchronization with Python
Stars: ✭ 156 (-38.1%)
Mutual labels: sync, synchronization
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>
);
}
}
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].