Slickscroll is a JavaScript library that makes momentum & parallax scrolling quick and painless
View Demo: slickscroll.musabhassan.com
Momentum Scrolling
Momentum Scrolling is the smooth and eased scrolling fancy websites have to allow the page to flow smoothly when scrolling.
Manually download from Releases, from the dist directory, or npm.
npm
npm install --save slickscrolljs
This setup will just apply momentum scrolling to the body
ES6 import
import slickScroll from './slickscroll.es.min.js';
const slick = new slickScroll({
root: "body"
});HTML script tag
<script src="./slickscroll.min.js" type="text/javascript"></script>
<script type="text/javascript">
let slick = new slickScroll.default({
root: "body"
});
</script>Node require
const slickScroll = require('slickscrolljs');
const slick = new slickScroll.default({
root: "body"
});The hello world will apply the momentum scrolling to the element you specify.
new slickScroll({
root: "body"
})The overflow property of the root element will be overridden with auto upon initialization of slickscroll. If you wish to change overflow to anything else, you must modify it after the initialization.
Momentum scrolling applies to both x and y axis of an element. If you wish for an axis to not scroll, change it's overflow value to hidden after slickscroll initialization.
Example to hide overflow-x after initializing up slickscroll;
const slick = new slickScroll.default({
root: "body"
});
document.body.style.overflowX = "hidden";All the valid options aswell as documentation and Getting Started can be found in the docs directory.
| Browser | Version |
|---|---|
| Chrome | 61+ |
| Edge | 80+ |
| IE | 11 |
| Firefox | 48+ |
| Opera | 48+ |
| Safari | 12+ |
Musab-Hassan
MIT license.