Skip to content
Related Articles

Related Articles

Save Article
Improve Article
Save Article
Like Article

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.

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

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

    Output:
    Scroll Indicator Working




    My Personal Notes arrow_drop_up
Recommended Articles
Page :