Momentum Scrolling Effect For Mouse Wheel – magic-scroll

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
};