Momentum Scrolling Effect For Mouse Wheel – magic-scroll

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

Preview:

Momentum Scrolling Effect For Mouse Wheel – magic-scroll

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

You Might Be Interested In:


Leave a Reply