scrollmirror

Demo

scrollmirror.netlify.app

Installation

npm i scrollmirror

Usage

import ScrollMirror from "scrollmirror";
/** Mirror all divs that match the class `.scroller` */
new ScrollMirror(document.querySelectorAll(".scroller"));

Options

You can pass in a few additional options to ScrollMirror as the second argument:

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

The type signature of the options object:

type Options = {
  proportional: boolean;
  vertical: boolean;
  horizontal: boolean;
}

proportional

Type: boolean, default: true. Should the scrolling speed be adjusted so that all mirrored elements reach the maximum scroll position at the same time?

vertical

Type: boolean, default: true. Should the vertical scroll position be mirrored?

horizontal

Type: boolean, default: true. Should the horizontal scroll position be mirrored?

Motivation

There are already a few libraries out there that do the same thing. But all I could find had some limitations (For example, react-scroll-sync needs React, syncscroll doesn't provide an NPM package).

Also, this simple package gave me an excuse to play around with the tooling involved with creating a robust open source npm package:

• The demo page is generated using Astro and deployed via Netlify
• Browser testing is being done with PlayWright, using the demo site as the source for the test fixtures
• The source code is written in TypeScript

Changelog

[0.0.2] - 2023-11

• Testing automated deployment from GitHub releases to npm