scryll

Introduction

JavaScript library for syncing two scrollbars with clear API

Demo

https://stackblitz.com/edit/js-43xuy6

How to install

npm install scryll # or yarn add scryll

How to setup

import scryll from "scryll";
// or
const scryll = require("scryll");

Examples

const myScryll = scryll(".element1", ".element2");

// stop sync scrolling
myScryll.kill()

const myScryll = scryll(".element1", ".element2", { init: false });

// start sync scrolling
myScryll.init();

// stop sync scrolling
myScryll.kill();

// You can use two values to control the scroll direction, vertical or horizontal
const myScryll = scryll(".element1", ".element2", { direction: "horizontal" }); // default is vertical

Methods

scryll(element1, element2, options)

The main function for making Scryll objects

Returns: Object

Parameters:

element1: String

The CSS selector of the first scroll element

element2: String

The CSS selector of the second scroll element

options: Object

Options:

Defaults

{
  init: true,
  direction: "vertical",
}

init: Boolean

Initialize the scroll events on scryll creation

direction: String

Select the direction of sync scrolling. Accepts two values vertical or horizontal

Example:

const myScryll = scryll(".element1", ".element2");

console.log(myScryll)
// {
//   init(),
//   kill(),
// }

init()

The function that responsible of starting sync scroll events when setting the init option to false

kill()

The function that responsible of stopping the sync scroll events

How to run

# clone repo
# install dependencies
npm run dev # or yarn dev

# production build
npm run build

License

MIT Copyright © 2022 - present, Abdalla Arbab and contributors

Name thought of by the amazing japser