Skip to content
Related Articles

Related Articles

How to Create Scroll Indicator using HTML CSS and JavaScript ?
  • Difficulty Level : Medium
  • Last Updated : 29 May, 2020

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

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

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

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

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

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    Complete code:

    filter_none

    edit
    close

    play_arrow

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

    chevron_right

    
    

    Output:
    Scroll Indicator Working

    full-stack-img




    My Personal Notes arrow_drop_up
Recommended Articles
Page :