The Scroll Indicator
Published on May 01, 2019
Scroll Indicator is basically a line which fills up based on how much the user has scrolled in the page.They are usually positioned at the Top of the page.
Output:
Checkout the output here
Let's get to Coding:
<body>
<div class="line" id="scrollIndicator"></div>
<div>
// ... some code
</div>
</body>All we did in the above snippet was adding a small scrollIndicator <div>.
Before we jump into how we can implement scroll indicator it is necessary to understand few window properties related to scrolling.
.line {
background: #038eff;
height: 5px;
border-radius: 3px;
width: 0%;
position: fixed;
top: 0;
}Above shows the CSS required for plotting the line. It should initially be at width 0. Then increase it based on the percentage of scroll.
Window's Scroll related Properties:
window.innerHeight- Height of the viewable portion of the browser.(Eg: 640)document.body.scrollHeight- Height of the entire webPage.window.scrollY- how many pixels the user has scrolled down so far. It is0on page load and it increases as the user scrolls down.
const scrollIndicatorElt = document.getElementById('scrollIndicator');
const maxScrollableHeight = document.body.scrollHeight - window.innerHeight;
window.addEventListener('scroll', moveScrollIndicator);- Get the
scrollIndicatornode by its id.The Scroll line appears in this element. - Find
maxScrollableHeightwhich specifies the number of pixels the user can scroll.To identify this we find the difference betweendocument.body.scrollHeightandwindow.innerHeight - Attach an Event listener to
scroll.
function moveScrollIndicator() {
const percentage = ((window.scrollY) / maxScrollableHeight) * 100;
scrollIndicatorElt.style.width = percentage + '%';
}moveScrollIndicatorfunction gets executed when scroll event is fired.percentageis the width of thescrollIndicatorelement.percentageis calculated as the ratio of Pixels scrolled(window.scrollY) by the user to total Scrollable Pixels (maxScrollableHeight)
Check the output here. Repo Link
That's All Folks!
A blog by Dhilip kumar