jQuery Simple Sync Scrollr

jQuery Simple Sync Scrollr is a tiny jQuery plugin which allows scroll multiple scrollable areas of the page synchronously.

How it works

When you scroll your scrollable area (or simply ‘pane’) jQSSS will scroll other panes to the same height/width simultaneously, regardless of their inner content size. Please refer to demo page and screenshots for more explanation. Added new sync mechanism since v1.1.0: sync scroll position by inner content (see demo)

Features

• Scrolls areas synchronously in both vertical and horizontal direction
• New feature: sync scroll position by inner content
• Provides custom callbacks for numerous events
• Has crossbrowser support (compatible with almost all modern browsers)
• Incredibly lightweight – size of minified js is only ~4KB!
• Re-attachable (can be disabled and re-enabled at any time)
• Easily integrates in any CMS platforms and UI frameworks
• Plays well with any other jQuery plugin
• Fully documented

Use cases for jQSSS

• Book, zines and papers reading (e.g. comparison of scanned pages and pages after ‘optical character recognition’ )
• Rich text editors for ‘content management systems’ (e.g. comparison of previous copy and current one)
• Viewing various live data that should be synced
• ...and many more options and possibilities

See jQSSS in action: https://nedgeva.github.io/jqsss/

Changelog

v1.2.0 - added new option: scroll pane to NEXT content block added new option: scroll by inner content blocks synchronously fixed some bugs v1.1.0 - added new feature: sync by inner content (see demo) added new argument sent to callbacks (ratio of scrolled height/width) removed junk code v1.0.0 - initial release