Tiny Momentum Scrolling Library With Vanilla JavaScript – SmoothScroll.js

Category: Animation , Javascript | July 26, 2021
Author:rayc2045
Views Total:579 views
Official Page:Go to website
Last Update:July 26, 2021
License:MIT

Preview:

Tiny Momentum Scrolling Library With Vanilla JavaScript – SmoothScroll.js

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

You Might Be Interested In:


Leave a Reply