Enable Synced Scrolling On Scrollable Elements – ScrollMirror

Preview:

Description:

ScrollMirror is a small yet powerful JavaScript library that allows you to synchronize the scroll positions of multiple scrollable elements on a web page. It works by mirroring the scroll position in either vertical or horizontal directions across any number of matched elements.

See Also:

• Synchronize Scrolling In Two Scrollable Elements – Scryll
• Synchronize scrolling Across Multiple scrollable Elements – jQuery scrollSync

How to use it:

1. Install and import the ScrollMirror.

# NPM
$ npm i scroll mirror

// ES Module
import ScrollMirror from 'scroll mirror';
// Browser
<script src="/dist/index.umd.js"></script>
// Or From A CDN
<script src="https://unpkg.com/scrollmirror"></script>

2. Create a new ScrollMirror and specify the selector of scrollable elements. That’s it.

<div class="scroller">
  Scrollable Element 1
</div>
<div class="scroller">
  Scrollable Element 2
</div>

new ScrollMirror(document.querySelectorAll(".scroller"));

3. Enable or disable horizontal/vertical scrolling.

const mirror = new ScrollMirror(document.querySelectorAll(".scroller"),{
    vertical: true,
    horizontal: true,
});

4. Get the current scroll progress in the form of {x: number, y: number}

mirror.progress

5. Set the progress and scrolls all mirrored elements.

mirror.progress = { x: 0.3, y: 0.6 };
// or only set one direction
mirror.progress = { y: 0.8 };
// or for both directions at once:
mirror.progress = 0.7;

Changelog:

v1.2.4 (06/25/2025)

• Update

v1.2.2 (05/24/2025)

• Bugfix

v1.2.1 (03/25/2025)

• Update

v1.2.0 (10/23/2024)

• make the scroll event handlers passive for improved performance

v1.1.0 (10/18/2023)

• optimize progress calculation
• export some helper functions in the module bundle
• new option debug to disable console messages

v1.0.0 (12/26/2023)

• Feature: Add API to get and set the current scroll progress
• Deprecation: Remove the option to opt out of proportional scrolling

v0.1.0 (12/26/2023)

• Allow to mirror the scroll position from and to the window