How to Create Scroll Indicator using HTML CSS and JavaScript ?

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.<!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>
<!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.
<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:My Personal Notes
arrow_drop_upSave
<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:
CSS-Misc
HTML-Misc
JavaScript-Misc
CSS
HTML
JavaScript
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Design a Tribute Page using HTML & CSS
How to set space between the flexbox ?
Build a Survey Form using HTML and CSS
Form validation using jQuery
Design a web page using HTML and CSS
REST API (Introduction)
Hide or show elements in HTML using display property
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
HTTP headers | Content-Type