Home reactjs How to Trigger onScroll Event in React Functional Component

How to Trigger onScroll Event in React Functional Component

by Shahriar Sagor

Hello Dev today now in this post i will show you How to Trigger onScroll Event in React Functional Component. The onScroll events are as important as other the event handlers in web development. So in this article, i will explain how to work with the onScroll event handler in React application comfortably. Now i will create a React application with the functional component to give you the proper demo.

In the functional component, we will display a list of data with a progress bar with the help of React useState hook. For the user has to scroll to show the hidden part of the list. As the user scrolls up or down, i will trigger an onScroll event handler.

It will calculate the height by using client height and scrollHeight DOM properties. This resulted in updating the progress bar status through the onScroll event handler in React.

React Functional Component On Scroll Event Handling Example

  • Step 1: Build React App
  • Step 2: Create Function Component
  • Step 3: Create Progress Bar with onScroll Event
  • Step 4: Update App Component
  • Step 5: View App on Browser

Build React App

In order to create a brand new project, we first make sure to install Node and Npm on our development system.

Open the terminal by using any code-editor, use the following command to install a new app.

npx create-react-app react-blog

The new application is just created, next move is to enter into the app folder.

cd react-blog

Create Function Component

We need a functional component, therefore make the new folder, name it components/.

Within the new directory, build the new file by the name of Posts.js.

Add the given code to the file to form the functional component.

import React from 'react'
function Posts() {
  return (
    <div>Posts page</div>
export default Posts

Create Progress Bar with onScroll Event

Head over to components/Posts.js file, add the provided code to the file.

import React from "react";
const DataItems = Array.from({ length: 55 }, (n, index) => {
  return {
    id: index,
    post: `Post ${index}`,
const Posts = () => {
  const [scroller, initScroller] = React.useState(0);
  const handleScroll = (event) => {
    const height = event.currentTarget.clientHeight;
    const barHeight = event.currentTarget.scrollHeight;
    const scrollTop = event.currentTarget.scrollTop;
    initScroller(((scrollTop + height) / barHeight) * 100);
  return (
      <div style={styles.progressBar}>
        <div style={{ ...styles.scrolled, width: `${scroller}%` }}></div>
      <p className="centeredItem">
        <strong style={styles.text}>{scroller.toFixed(2)}%</strong>
      <div style={styles.postBlock} onScroll={handleScroll}>
        <div style={styles.post}>
          {DataItems.map((post) => (
            <div style={styles.post} key={post.id}>
const styles = {
  postBlock: {
    width: 555,
    height: 410,
    margin: "0 auto",
    overflowY: "auto",
    background: "rgb(202 216 255)",
    overflowX: "hidden",
  post: {
    color: "#fff",
    fontSize: "22px",
    textAlign: "center",
    margin: "12px 20px",
    padding: "28px 28px",
    background: "#3f51b5",
    borderBottom: "1px solid white",
  progressBar: {
    width: 555,
    height: 32,
    margin: "auto",
    backgroundColor: "#eeeeee",
  scrolled: {
    height: "100%",
    backgroundColor: "#ffc107",
  centeredItem: {
    textAlign: "center",
export default Posts;

Update App Component

Look for App.js file, this is the main component from where you can serve the component that we created to handle the onScroll event.

Hence add the code to the App.js file.

import React from "react";
import "./App.css";
import Posts from "./components/Posts";
function App() {
  return (
      <h2>React onScroll Event Handler Example</h2>
      <Posts />
export default App;

View App on Browser

We are now going to start the app development server, you can do it by executing the provided command.

npm start

Check app on browser, if building locally:


Read Also: How to Create Password Show / Hide Toggle Button in React

Thanks for read. I hope it help you. For more you can follow us on facebook.


You may also like