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
Follow me for interesting contents.
That's All Folks!
Top comments (10)
Why not
transform: scaleX();?Yes, that should also work. Also that avoids adding (*100) to the percentage calculation.
I just went with the simplest approach.In
transformpeople might have to look into transform properties as well.Haha, I'm all about that micro performance 😛
I wasn't aware that it has an impact on performance.
Transform properties require GPU calculations which are faster. Some more reading here - smashingmagazine.com/2016/12/gpu-a... The good thing here is that the div is detached from the box model of the page, so at least it will not do global recalc ^
Hmmm, thats an interesting read! :)
So, I'm going to ask:
Why?
What is the UX benefit of this?
Notice that even in your GIF, the right hand scroll bar also shows you relative distance to end of the document.
Now two things are moving as I scroll down the page; your bar and the browser's bar.
If this was requested by a product owner or suggested by my dev team, I'd ask: why?
Hi author, I got one question, which is how to remember the current scroll position, so when refresh page, the bar progress still display, instead of display nothing?
Anyone knows how to use this to track a post in Ruby on Rails?
Thanks dude this article was super helpful 👍🏾