MoreLesson 213Free preview

Scroll Drawing

This lesson is part of How To · All levels

Summary

A scroll drawing or scroll progress indicator is a line filled as a page rolls, telling how far the user reads. The value is calculated from the roll position divided by the total available roll distance, then converted to a percentage. The result is applied to the width of the fixed element at the top of the page.

Key points

Total scroll distance calculated from scrollHeight minus clientHeight
The percentage of progress is scrolltop
The indicator usually uses position: fixed at the top with a small height
Use the requestAnimationFrame or event passive to keep the scroll smooth

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.