Enable Synced Scrolling On Scrollable Elements – ScrollMirror

Category: Javascript , Recommended | December 26, 2023
Author:hirasso
Views Total:121 views
Official Page:Go to website
Last Update:December 26, 2023
License:MIT

Preview:

Enable Synced Scrolling On Scrollable Elements – ScrollMirror

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:

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.

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

4. The proportional option allows you to normalize scroll speeds, ensuring that when scrolled, all mirrored elements reach the end at the same time. Default: true.

new ScrollMirror(document.querySelectorAll(".scroller"),{
    proportional: true,
});

Changelog:

v0.1.0 (12/26/2023)

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

You Might Be Interested In:


Leave a Reply