Easy Scroll Position Tracking – ScrollProgress.js

ScrollProgress.js is an ultra-light JavaScript library that displays a user’s scroll progress on a web page. It adds a thin bar at the top of the page that visually represents how far down the page a visitor has scrolled.

The scroll progress bar updates in real-time as users scroll up or down the page. It provides a subtle visual cue about page length and current position without distracting from the main content. This can improve user experience, especially on longer pages or infinite scroll layouts.

How to use it:

1. Add the JavaScript ScrollProgress.js to your webpage.

<script src="scrollProgress.js"></script>

2. The script will automatically create and style the progress bar. You can customize its appearance by modifying these styles directly in scrollProgress.js:

progressBar.style.position = 'fixed';
progressBar.style.top = '0';
progressBar.style.left = '0';
progressBar.style.height = '5px';
progressBar.style.backgroundColor = '#3498db';
progressBar.style.width = '0';
progressBar.style.zIndex = '9999';
progressBar.style.transition = 'width 0.25s ease-out';

How it works:

The JavaScript library first creates a div element that will serve as the progress bar. It applies inline styles to position it at the top of the viewport, set its initial dimensions and color, and define a smooth transition for width changes.

The progress bar is then added to the document’s body and uses the updateProgress function to calculate the scroll progress as a percentage by dividing the current scroll position by the total scrollable height of the page.

Finally, the calculated percentage is used to update the width of the progress bar, visually reflecting the user’s scroll progress. The window.addEventListener ensures that this function is called whenever the user scrolls the page.