How to Create Scroll Indicator using HTML CSS and JavaScript ?
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 >
< 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 >
</ 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 ;
}
.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>
|
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>
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>
|
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:
Last Updated :
29 May, 2020
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...