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
>
<!--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
>w3wiki</
div
>
<
div
>w3wiki</
div
>
<
div
>w3wiki</
div
>
<
div
>w3wiki</
div
>
<
div
>w3wiki</
div
>
<
div
>w3wiki</
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
>w3wiki</
div
>
<
div
>w3wiki</
div
>
<
div
>w3wiki</
div
>
<
div
>w3wiki</
div
>
<
div
>w3wiki</
div
>
<
div
>w3wiki</
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:
Contact Us