Gradient Vertical Scroll Progress Bar

This is a Gradient Vertical Scroll Progress Bar. It maps the user’s vertical position to a visual meter along the right edge of the viewport. Its function is to provide an unobtrusive sense of reading progress without cluttering the main content area.

Specs

• Weight: < 1 KB (Compressed). Zero dependencies.
• Performance: High. Minimal DOM manipulation during the scroll event.
• Theming / Customization: Easily controlled via the violet to red CSS linear gradient.
• Responsiveness: Fixed positioning ensures the bar stays in view regardless of the layout width.
• Graceful Degradation: The progress bar is a non-critical decorative element. If JavaScript is disabled, the page remains fully functional without the indicator.

Anatomy

The structure follows a minimalist, layered approach.

• HTML (The Skeleton): Two empty div elements: #progressBarContainer (the track) and #progressBar (the active indicator).
• CSS (The Skin): Both elements are set to position: fixed to ignore the document flow. The native browser scrollbar is hidden using vendor-specific properties (::-webkit-scrollbar and scrollbar-width) to maintain visual purity.
• JS (The Nervous System): An unthrottled scroll listener that recalculates the ratio of current scroll position to total scrollable height.

Logic

The core mechanism is a simple linear mapping of pixels to percentages.

let newProgressHeight = (window.pageYOffset / totalPageHeight) * 100;
progressBar.style.height = `${newProgressHeight}%`;
progressBar.style.opacity = `${newProgressHeight}%`;

The script captures the total scrollable height once on load. On every scroll event, it divides the current offset by that total. This value is used twice: once to extend the physical height of the bar and once to increase its opacity, making the indicator “glow” more intensely as the user nears the end of the document.

Feel

Direct and fluid. The removal of the standard scrollbar creates a distraction-free reading environment. The progress bar feels tethered to the user’s hand, reacting instantly with a vibrant color transition. It is an aesthetic alternative to standard navigational aids.