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>

Complete code:

html

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

Create an Infinite Scroll Page using HTML CSS & JavaScript

tarundhamor

Improve

Article Tags :

How to Create Scroll Indicator using HTML CSS and JavaScript ?

Similar Reads