Tiny Momentum Scrolling Library With Vanilla JavaScript – SmoothScroll.js

Preview:

Description:

A tiny JavaScript library that adds a subtle momentum scrolling effect to web page.

How to use it:

1. Add the stylesheet SmoothScroll.css and JavaScript SmoothScroll.min.js to the page.

<link rel="stylesheet" href="./css/SmoothScroll.css" />
<script src="./js/SmoothScroll.min.js"></script>

2. The HTML structure.

<div class="viewport">
  <div class="container">
    ...
  </div>
</div>

3. Enable the Momentum Scrolling effect on the page.

const isTouchDevice = 'ontouchstart' in document.documentElement;
disableScroll();
if (!isTouchDevice) smoothScroll();
window.onresize = () => {
  resizeBodyHeight();
};
window.onload = () => {
  enableScroll();
  resizeBodyHeight();
};
// Functions
function disableScroll() {
  document.body.style.overflow = 'hidden';
}
function enableScroll() {
  document.body.style.overflow = '';
}
function smoothScroll() {
  document.querySelector('.viewport').classList.add('SmoothScroll');
  new SmoothScroll({
    target: document.querySelector('.container'),
    scrollEase: 0.08,
    maxOffset: 500,
  });
}
function resizeBodyHeight() {
  document.body.style.height = document.querySelector('.viewport').scrollHeight + 'px';
}