How to Create Scroll Indicator using HTML CSS and JavaScript ?

Last Updated : 26 Jul, 2024

Scroll Indicator is a progress bar that represents how much a page has been scrolled. When we scroll down the bar fills up and when we scroll up the bar amount reduces.

Approach:

Now, we will create a basic webpage with text to enable scrolling and then use JavaScript to make the scroll indicator work.

HTML Code: In this section, we will create a basic structure of the body. html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
    <title>GFG : Scroll Indicator</title>
</head>

<body>
    <!--The scroll indicator line 
        at the top of page-->

    <div class="line" id="scrollIndicator"></div>

    <!--Content to fill the page 
        to enable scrolling-->
    <div class="text">
        <div>GeeksforGeeks</div>
        <div>GeeksforGeeks</div>
        <div>GeeksforGeeks</div>
        <div>GeeksforGeeks</div>
        <div>GeeksforGeeks</div>
        <div>GeeksforGeeks</div>
    </div>
</body>

</html>

CSS code: In this section, we will add some CSS property to set the style to create scroll indicator. CSS

<style>
    body {
        margin: 0;
    }

    /* Formatting text to 
    fill the page */
    .text {
        font-size: 80px;
        color: green;
        text-align: center;
        line-height: 3em;
    }

    /* The progress bar - 
    scroll indicator */
    .line {
        background: green;
        height: 8px;
        border-radius: 4px;
        width: 0%;
        position: fixed;
        top: 0;
    }
</style>

Approach:

window.innerHeight - The height of the viewable portion of the browser.

document.body.scrollHeight - The height of webpage.

window.scrollY - Number of pixels the user has scrolled down so far.

maxHeight - Calculate number of pixels user can scroll.

percentage - The width of scrollIndicator element.

JavaScript Code for Scroll Indicator: javascript

<script>

    // Added event listener to the scroll
    window.addEventListener('scroll',
            moveScrollIndicator);

    // Getting scrollIndicator element by ID
    const scrollIndicatorElt = 
        document.getElementById('scrollIndicator');

    // Height of entire web page - height
    // of viewable portion of browser
    const maxHeight = 
        window.document.body.scrollHeight 
        - window.innerHeight;

    function moveScrollIndicator(e) {

        // Calculating width of the 
        // scrollIndicator element
        const percentage = 
            ((window.scrollY) / maxHeight) * 100;

        // Pixels scrolled by the user 
        // to total scrollable Pixels
        scrollIndicatorElt.style.width
                 = percentage + '%';
    }
</script>