
Create the cool scrolling indicator effect, print an horizontal line as the user scrolls down the page to indicate how further down they are.
HTML
Preferably at the top of your body, but not required.
<div class="pagescroll"></div>
Code language: HTML, XML (xml)
CSS
Using CSS Variables, is this awesome or what?
.pagescroll {
--scroll: 0%;
position: fixed;
top: 0;
left: 0;
height: 8px;
width: 100%;
background:
linear-gradient(to right,
red var(--scroll),
transparent 0);
z-index: 100;
}
Code language: CSS (css)
JavaScript
It is important to throttle the scroll events, otherwise the CPU might slow down the client machine. Check out the included nonBlockingRepetiveFunctionCall function in the snippet below.
document.addEventListener("DOMContentLoaded", function (event) {
/**
* PAGE SCROLL EFFECT
*/
const _timeoutIDs = {};
function nonBlockingRepetiveFunctionCall(paramFunction, timeoutMs, functionID = ``) {
if (!_timeoutIDs[paramFunction + functionID]) {
// add timeout to not block the GUI
_timeoutIDs[paramFunction + functionID] = window.setTimeout(() => {
paramFunction();
window.clearTimeout(_timeoutIDs[paramFunction + functionID]);
_timeoutIDs[paramFunction + functionID] = undefined;
}, timeoutMs);
}
}
const $pagescroll = document.querySelector(".pagescroll");
window.addEventListener('scroll', () => {
if ($pagescroll) {
nonBlockingRepetiveFunctionCall(() => {
const scrollTop = document.documentElement["scrollTop"] || document.body["scrollTop"];
const scrollBottom = (document.documentElement["scrollHeight"] || document.body["scrollHeight"]) - document.documentElement.clientHeight;
scrollPercent = scrollTop / scrollBottom * 100 + "%";
$pagescroll.style.setProperty("--scroll", scrollPercent);
}, 10);
}
});
});
Code language: JavaScript (javascript)