Scroll Progress with Indicator Bar + % Counter
This script tells you how far you've scrolled down the page by way of a progress indicator bar and % counter, which recalculates if the browser window resizes, or if device orientation changes from portrait to landscape (and vice versa).
Useful on long articles to show visitors how far they've read, and how much further they have to go.
Works in modern browsers and IE8+.
Please view the source of this page for HTML markup, CSS and JS.
JavaScript Performance Considerations
Because this is a scroll-activated script, the rate at which the function fires has the potential to be very high.
Attaching functions directly to the scroll event is usually a bad idea; Scrolling using a trackpad, scroll wheel, or just by dragging a scrollbar can easily trigger 30 events per second. Scrolling on a smartphone can trigger significantly more.
This script takes performance into consideration by using;
- A throttle to limit how often the scrollProgress() function executes while scrolling.
- A debounce to recalculate document height and fire the scrollProgress() function after a window resize event.
"Debouncing" and "throttling" help improve performance by controlling the effect of potentially expensive JavaScript functions that may otherwise cause a page to become unresponsive when fired repeatedly. Please see the Debouncing and Throttling Explained Through Examples article at CSS Tricks for further information.
Scroll down and watch your progress...
Now for some filler to give you something to scroll:
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah.
Related
More demos and snippets
Did you find this useful? There are more demos and code snippets this way.