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.

<!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.

<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:

<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>

Complete code:

<!DOCTYPE html>
<html>

<head>
    <title>GFG : Scroll Indicator</title>
    <style>
        body {
            margin: 0;
        }

        .text {
            font-size: 80px;
            color: green;
            text-align: center;
            line-height: 3em;
        }

        .line {
            background: green;
            height: 8px;
            border-radius: 4px;
            width: 0%;
            position: fixed;
            top: 0;
        }
    </style>
</head>

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

    <div class="text">
        <div>GeeksforGeeks</div>
        <div>GeeksforGeeks</div>
        <div>GeeksforGeeks</div>
        <div>GeeksforGeeks</div>
        <div>GeeksforGeeks</div>
        <div>GeeksforGeeks</div>
    </div>

    <script type="text/javascript">
        window.addEventListener('scroll',
                moveScrollIndicator);

        const scrollIndicatorElt =
            document.getElementById('scrollIndicator');

        const maxHeight =
            window.document.body.scrollHeight
            - window.innerHeight;

        function moveScrollIndicator(e) {
            const percentage = 
                ((window.scrollY) / maxHeight) * 100;

            scrollIndicatorElt.style.width
                = percentage + '%';
        }
    </script>
</body>

</html>