Logo Scroll indicator tutorial

A scroll indicator is like a progress bar measuring how far you have scrolled down on a page. You can see a working example here.

We'll start by creating the actual indicator.
You can be creative here and add all the styling (css) and markup (html) you want, but we'll keep it simple in this tutorial.
Create the following html markup in your document (the important part here is the id="slider" which will be referenced in the JavaScript code, so if you change this, also remember to changed it accordingly in the JavaScript code): 

HTML


<div class="slider-wrapper">
    <div id="slider" style="width: 0%"></div>
</div>

The following css styling is essential for the purpose of this scroll indicator, especially the fixed position (no sense in creating an indicator that will follow the scrolling): 

CSS


.slider-wrapper{
    position: fixed;
    top: 0;
    left: 0;
    height: 2px;
    width: 100%;
}
.slider{
    height: 100%;
    background-color: rgb(36, 132, 241);
}

With that setup, it's time for the functionality. We'll do this with JavaScript: 

JavaScript code


const slider = document.querySelector("#slider");
    
document.addEventListener("scroll", function(){
    const totalScrollDistance =
        document.documentElement.scrollHeight -
        document.documentElement.clientHeight;
    const progress = scrollY * 100 / totalScrollDistance;
    slider.style.width = progress + "%";
});

To briefly explain the code, on the first line we create a variable (const slider) where we grab the slider from the html markup (id="slider"): 

JavaScript code


const slider = document.querySelector("#slider");

Next, we create an event listener that will execute the code between the curly brackets of function(){}, every time we scroll the page:

Performance warning!

The code will be executed many, many times per second and therefore should not hold too heavy and taxing functionality or the user experience will degrade tremendously. 

JavaScript code


document.addEventListener("scroll", function(){
    //Every thing in here will be executed every time we scroll
});

The first line inside the event listener is the declaration of a variable that will hold the distance in pixels for the whole page that we can scroll.
document.documentElement.scrollHeight is the height of the entire documents content in pixels.
document.documentElement.clientHeight is the height of the viewport (the visible area in the browser).

We subtract the clientHeight from the scrollHeight because the distance we need to scroll is only going to be from zero to the entire documents height minus the viewable area:

But why? I don't understand that!

Well, imagine you have a page where the content is bigger than the viewable area. Let's say the viewports height is 700px and the entire documents height is 900px. This means that there is 200px "hidden" beneath the viewport. So effectively we only need to be able to scroll 200px to get to the bottom of the page. So in order to get the value of 200px, we simply subtract 700px (clientHeight) from 900px (scrollHeight) and voilá, we have a value of 200px as the scrolling distance. 

JavaScript code


const totalScrollDistance =
    document.documentElement.scrollHeight -
    document.documentElement.clientHeight;

The next part is the part where we calculate the percentage of the distance we have currently scrolled.
This will be used for the width of the slider where 0% width indicates we are at the beginning of the page and 100% width indicates we are at the end (the scrollY variable is a property of the global object window and simply holds the value of where we have currently scrolled to): 

JavaScript code


const progress = scrollY * 100 / totalScrollDistance;

Now all we need is to update the slider with the new value.
We do this by updating the inline style of the slider (style="width: 0%") with the percentage value we calculated before (including the suffix: "%" in order for the style to know we are talking about percentage): 

JavaScript code


slider.style.width = progress + "%";

The result, if you inspect the slider, will be an updated inline style where the percentage value will update whenever you scroll the page. Let's say the calculated progress value is 23 (%), then the slider will look like this: 

HTML


<div class="slider-wrapper">
    <div id="slider" style="width: 23%"></div>
</div>

Hope you enjoyed this tutorial. Happy coding...