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><htmllang="en"><head><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>GFG : Scroll Indicator</title></head><body><!--The scroll indicator lineat the top of page--><divclass="line"id="scrollIndicator"></div><!--Content to fill the pageto enable scrolling--><divclass="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 tofill 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 scrollwindow.addEventListener('scroll',moveScrollIndicator);// Getting scrollIndicator element by IDconst scrollIndicatorElt =document.getElementById('scrollIndicator');// Height of entire web page - height// of viewable portion of browserconst maxHeight =window.document.body.scrollHeight- window.innerHeight;functionmoveScrollIndicator(e) {// Calculating width of the// scrollIndicator elementconst percentage =((window.scrollY) / maxHeight) * 100;// Pixels scrolled by the user// to total scrollable PixelsscrollIndicatorElt.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><divclass="line"id="scrollIndicator"></div><divclass="text"><div>GeeksforGeeks</div><div>GeeksforGeeks</div><div>GeeksforGeeks</div><div>GeeksforGeeks</div><div>GeeksforGeeks</div><div>GeeksforGeeks</div></div><scripttype="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: