scryll
v0.1.5
Published
JavaScript library for syncing two scrollbars
Downloads
226
Maintainers
Readme
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