MoreLesson 168Free preview
Scroll Indicator
This lesson is part of How To · All levels
Summary
This lesson discusses the progression indicators that indicate how far a user scrolls a page. The indicator is usually a thin blade at the top that increases in width according to the scroll position. The calculation compares the distance already covered with the total distance available.
Key points
- Use window.scrollY or documentElement.scrollTop for the current roll position
- Calculate the total roll distance by scrollHeight minus clientHeight
- Update the width of the indicator in percent and handle the division by zero
- Listen to the event scroll passively and recount as the page size changes
Full lesson
Code examples and quizzes
Full lessons, code examples, and quizzes are available to subscribers. 5 questions.