Scroll Indicator using React

A scroll indicator is one essential component in an application design. Very handy to show to the user how much has been scrolled.

Why don't use prebuilt scroll components?

Often when there is a need to implement a scroll indicator, you can use an existing library, plugin, package or something already prebuilt.

This is reasonable and perfectly fine, but in some cases, using external libraries often adds unnecessary dependencies and code bloatware to our application.

This might lead to extra load time because these dependencies have to be downloaded and can also lead to code conflicts between the library or plugin and our existing application codebase, which can take time to get fixed.

That's why building your own scroll indicator can be the most effective solution sometimes.

It's a feature you can implement with just a few lines of code, if you know Javascript and React, it is very simple indeed.

You access the repository here, but what I've done was create a component called ScrollIndicator.js and import it to my App.js

import ScrollIndicator from './ScrollIndicator';

Inside the ScrollIndicator component, I wrote the following code:

export default function ScrollIndicator() {

    const [scroll, setScroll] = useState(0);

    const onScroll = () => {
        const winScroll = document.body.scrollTop ||
                          document.documentElement.scrollTop;
        const maxHeight = document.documentElement.scrollHeight -
                          document.documentElement.clientHeight;
        const scrolledPercent = (winScroll / maxHeight) * 100;
        setScroll(scrolledPercent);
    };

    const scrollString = Math.trunc(scroll);

    window.addEventListener("scroll", onScroll);

    return (
        <div className="scrollContainer">
            <div style={{ width: `${scroll}%` }} 
                 className="scrollIndicator">
                    <p className='scrollDetails'>
                       {scrollString}{' '}%
                    </p>
            </div>
        </div>
    );
}

• The const winScroll tells us how many pixels the user has scrolled down so far.

• The const maxHeight tells us the difference between the height of the whole webpage and the height of the maximum portion of the browser that the user can see.

• The const scrolledPercent tells us the percentage value of the width of the Scroll Indicator element.

• The const scrollString removes the decimal part of the number returned by scroll, which will allow us to show the information inside the scrollIndicator.

I also added the property:

window.addEventListener("scroll", onScroll);

which will trigger the function onScroll when we start scrolling down the page.

The useState hook controls the state value to scrolledPercent, so the scrollIndicator element bar starts filling up when we scroll down the page and reduces the quantity of color when we scroll up the page.

For the indicator colors, we add some styling:

/* Scroll */

.scrollContainer {
    position: sticky;
    z-index: 1;
    top: 0;
    width: 100%;
    height: 2rem; 
    background: black;
}

.scrollIndicator {
    height: 2rem;
    background: linear-gradient(to right ,  #6f2232, #950740, #c3073f);
    width: 0%;
}

.scrollDetails {
    color:white;
}

A deployed version on Vercel is available here.

The random text at demonstration version, is provided for Bacon Ipsum.

P.S. That scrollIndicator is precisely the one you can see working on my portfolio.