\r\n\r\n[](https://github.com/hirasso/scrollmirror/actions/workflows/e2e-tests.yml)\r\n[](https://github.com/hirasso/scrollmirror/actions/workflows/unit-tests.yml)\r\n[](https://www.npmjs.com/package/scrollmirror)\r\n[](https://github.com/hirasso/scrollmirror/blob/master/LICENSE)\r\n\r\n
\r\n\r\n## Demo\r\n\r\n[scrollmirror.js.org](https://scrollmirror.js.org)\r\n\r\n## Installation\r\n\r\nInstall the plugin from npm and import it into your bundle:\r\n\r\n```bash\r\nnpm i scrollmirror\r\n```\r\n\r\n```js\r\nimport ScrollMirror from \"scrollmirror\";\r\n```\r\n\r\nOr include the minified production file from a CDN:\r\n\r\n```html\r\n\r\n```\r\n\r\n## Usage Example\r\n\r\nSuppose you have the following HTML:\r\n\r\n```html\r\n
\r\n
\r\n \r\n
\r\n
\r\n \r\n
\r\n
\r\n\r\n```\r\n\r\nThis is how you would mirror the scroll position between the two `div.scroller`:\r\n\r\n```js\r\nimport ScrollMirror from \"scrollmirror\";\r\n/** Mirror all divs that match the class `.scroller` */\r\nnew ScrollMirror(document.querySelectorAll(\".scroller\"));\r\n```\r\n\r\nSee also this [minimal example on CodePen](https://codepen.io/rassohilber/pen/JjxwJpo)\r\n\r\n💡 To mirror the scroll position from and to the `window`, you would have to add one of `:root`, `html` or `body` to the selector:\r\n\r\n```js\r\nnew ScrollMirror(document.querySelectorAll(\":root, .scroller\"));\r\n/** or */\r\nnew ScrollMirror(document.querySelectorAll(\"html, .scroller\"));\r\n/** or */\r\nnew ScrollMirror(document.querySelectorAll(\"body, .scroller\"));\r\n```\r\n\r\n## Options\r\n\r\nYou can pass in a few additional options to ScrollMirror as the second argument:\r\n\r\n```js\r\nnew ScrollMirror(document.querySelectorAll(\".scroller\"), options);\r\n```\r\n\r\nThe type signature of the options object:\r\n\r\n```js\r\ntype Options = {\r\n vertical: boolean;\r\n horizontal: boolean;\r\n debug: boolean;\r\n}\r\n```\r\n\r\n### `vertical`\r\n\r\nType: `boolean`, default: `true`. Should the vertical scroll position be mirrored?\r\n\r\n### `horizontal`\r\n\r\nType: `boolean`, default: `true`. Should the horizontal scroll position be mirrored?\r\n\r\n### `debug`\r\n\r\nType: `boolean`, default: `true`. Should debug messages be printed to the console?\r\n\r\n## API\r\n\r\nTo access ScrollMirror's API, you have to save a reference to the class during instaciation:\r\n\r\n```js\r\nconst mirror = new ScrollMirror(document.querySelectorAll(\".scroller\"));\r\n```\r\n\r\n### `mirror.progress`\r\n\r\nGet the current scroll progress in the form of `{ x: number, y: number }`, where both x and y are a\r\nnumber between 0-1\r\n\r\n### `mirror.progress = value`\r\n\r\nSet the progress and scrolls all mirrored elements. For example:\r\n\r\n```js\r\n// for both directions\r\nmirror.progress = { x: 0.2, y: 0.5 };\r\n// or only set one direction\r\nmirror.progress = { y: 0.5 };\r\n// or for both directions at once:\r\nmirror.progress = 0.5;\r\n```\r\n\r\n### `mirror.getScrollProgress(element: HTMLElement)`\r\n\r\nGet the current progress of an element. The element doesn't _need_ to be one of the mirrored elements\r\n\r\n```ts\r\nconst mirror = new ScrollMirror(document.querySelectorAll(\".scroller\"));\r\n// ...sometime later:\r\nconsole.log(mirror.getScrollProgress(document.querySelector(\":root\")));\r\n```\r\n\r\n## Motivation\r\n\r\nThere 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](https://github.com/okonet/react-scroll-sync) needs React, [syncscroll](https://github.com/asvd/syncscroll) doesn't provide an NPM package).\r\n\r\nAlso, this simple package gave me an excuse to play around with the tooling involved with creating a robust open source `npm` package:\r\n\r\n- The [demo page](https://scrollmirror.js.org) is generated using [Astro](https://astro.build) and deployed via [Netlify](https://www.netlify.com/)\r\n- Browser testing is being done with [PlayWright](https://playwright.dev/), using the demo site as the source for the test fixtures\r\n- The source code is written in [TypeScript](https://www.typescriptlang.org/)\r\n","readmeFilename":"README.md"}