React On Page Scroll Progress Bar With Web API Example

Friends, if you want to know how to display a progress bar on page scroll in a React application, then this tutorial is meant for you.

Here, we will learn to build a progress bar using pure JavaScript and CSS in a React 16 + application. We are going to create a progress bar that would show how many times the user has scrolled on a web page.

Hence, the purpose is to create such a progress indicator that works back and forth on the scroll very smoothly. There will be no need for third-party package for building the progress bar. In place of that, we are going to use some of the standard Web APIs. See below:

scrollTop

scrollHeight

clientHeight

Now, let’s begin with learning- How To Build Scroll Progress Bar With Web API

The following steps are to be followed for building and implementation of the scroll progress bar.

Step 1- Create React App

The very first or basic step towards showing the progress bar demo, we need to install the React app. Skip this step if you have already done it.

npx create-react-app react-page-scroll-progressbar-demo

Next, we get into the project folder.

cd react-page-scroll-progressbar-demo

Now, run the app.

npm start

 

Step 2- Make The Component Ready

This is the basic configuration of an essential React component. We imported the React library from the React folder at the top of the template.

 

We initialized the component and set the constructor and also defined the initial scroll state to 0.

import React from 'react';

class App extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      scroll: 0
    };
  }

}

export default App;

 

Step 3- How To Create A Scroll Indicator In React

Now is required to add the following method inside the React Component. That will make us understand what is going on in it.

progressBar = () => {
  const scrollTotal = document.documentElement.scrollTop;
  const heightWin = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  const scroll = `${scrollTotal / heightWin * 100}%`;

  this.setState({
    scroll: scroll
  });
};

 

The progressBar() function handles the progress of a progress indicator as soon as the user triggers the scroll event in a React app.

You know that we have used the scrollTop web API. This API is generally used for getting and setting the number of pixels that an element is vertically scrolled.

An element’s scrollTop value is an estimation of the distance from the element’s top to its topmost visible content. Moreover, if an element’s content does not create a vertical scrollbar, then its scrollTop value must be around 0.

To calculate the window height, we use a basic formula. In this formula, we deduct the scrollHeight from the clientHeight.

After that, we put a simple logic- scrollTotal / heightWin* 100. It is used for calculating the scrolled pixels and set the progress bar state.

scrollHeight

The scrollHeight is a read-only property. Also, it is a measurement of the height of an element’s content, including content, not visible on the screen because of the overflow.

clientHeight

Similar to scrollHeight, clientHeight is also a read-only property and by default, it’s zero for the elements with no CSS or inline layout boxes. Otherwise, it’s the inner height of elements in pixels. It includes padding but excludes borders, margins, and horizontal scrollbars.

 

The next step is to bind the progressBar() function to the componentDidMount and componentWillUnmount React lifecycle hooks.

componentDidMount() {
  window.addEventListener("scroll", this.progressBar);
}

componentWillUnmount() {
  window.removeEventListener("scroll", this.progressBar);
}

 

Step 4- Style React Progress Bar

To style the progress indicator, we need to define the following classes inside the render() function. Our progress bar will, then, have the following CSS styling.

const progressMainWrapper = {
  background: "rgba(255, 255, 255, 0.14)",
  height: "15px",
  position: "fixed",
  top: 0,
  left: 0,
  zIndex: 101,
  width: "100%"
};

const progressMainStyle = {
  height: "15px",
  background: "#00cc83",
  width: this.state.scroll
};

 

Step 5- The Progress Bar

To display the progress bar on page scroll, we have to define the HTML divs and apply the following style.

return (
  <div className="progress-bar" style={progressMainWrapper}>
    <div style={progressMainStyle} />
  </div>
);

 

Step 6- The Final Code

In this step, we open the App.js file here. We can check out the final code for the on-page scroll progress bar example:

import React from 'react';

class App extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      scroll: 0
    };
  }

  componentDidMount() {
    window.addEventListener("scroll", this.progressBar);
  }

  componentWillUnmount() {
    window.removeEventListener("scroll", this.progressBar);
  }

  progressBar = () => {
    const scrollTotal = document.documentElement.scrollTop;
    const heightWin = document.documentElement.scrollHeight - document.documentElement.clientHeight;
    const scroll = `${scrollTotal / heightWin * 100}%`;

    this.setState({
      scroll: scroll
    });
  };

  render() {
    const progressMainWrapper = {
      background: "rgba(255, 255, 255, 0.14)",
      height: "15px",
      position: "fixed",
      top: 0,
      left: 0,
      zIndex: 101,
      width: "100%"
    };

    const progressMainStyle = {
      height: "15px",
      background: "#00cc83",
      width: this.state.scroll
    };

    return (
        <div className="progress-bar" style={progressMainWrapper}>
          <div style={progressMainStyle} />
        </div>
    );
  }
}

export default App;

 

Summary

Now, we reach the end of this guide and, if we check on the browser, we will see on the top of the web page a progress bar that displays the progress of a page scroll back and forth.

Thanks