Synchronize Scrolling In Two Scrollable Elements – Scryll

Preview:

Description:

There are many situations where you need to have multiple scrolling elements in your site working together at the same time. There is a lot of complex scrolling syncing libraries out there, but sometimes you only need a simple one. If so, this library may be the right fit for you.

Scryll is a Vanilla JavaScript library that can be used to synchronize scrolling in two scrollable elements that contain scrollbars. Supports both horizontal and vertical scrolling.

For example, let’s say you have a list of products that are displayed on the product page beside a list of reviews. With the Scryll library, these two elements will be synchronized so that when you scroll one element, it triggers the other one to scroll as well.

How to use it:

1. Install and import the Scryll.

# Yarn
$ yarn add scryll
# NPM
$ npm i scryll

// ES
import scryll from "scryll";
// CommonJS
const scryll = require("scryll");
// Browser
import scryll from "./dist/scryll.esm.js";

2. Synchronize scrollbars in two scrollable elements.

const myScryll = scryll('.element-1', '.element-2');

3. Enable horizontal scrolling.

const myScryll = scryll('.element-1', '.element-2', {
      direction: "horizontal",
});

4. Enable/disable the Scryll.

// start
myScryll.init();
// stop
myScryll.kill();