Author: | rayc2045 |
---|---|
Views Total: | 2,579 views |
Official Page: | Go to website |
Last Update: | July 26, 2021 |
License: | MIT |
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'; }