Author: | mudin |
---|---|
Views Total: | 10,395 views |
Official Page: | Go to website |
Last Update: | September 6, 2019 |
License: | MIT |
Preview:

Description:
Want to have a mobile app like swipe-to-scroll effect on the desktop?
magic-scroll is a vanilla JavaScript library that applies a momentum scrolling effect to the webpage when scrolling down/up with mouse wheel.
How to use it:
Install the magic-scroll package.
# NPM $ npm install magic-scroll.js --save
Import the magic-scroll module.
import MagicScroll from "./MagicScroll.js";
Or load the MagicScroll.cjs.js
script in the page.
<script src="MagicScroll.cjs.js"></script>
Apply the MagicScroll to the target scrollable element and done.
let magicScroll = new MagicScroll({ target: document.querySelector(".scrollableElement") });
Config the Momentum Scrolling Effect with the following settings:
let magicScroll = new MagicScroll({ target: document.querySelector(".scrollableElement"), speed: 80, smooth: 12, current: 0 // position });
Execute a function on each scroll.
magicScroll.onUpdate = a => { // do something };