How to Trigger an Event On Web Page Scroll in React 18

Last Updated on March 4, 2024 by Digamber in React JS

Page scrolling refers to vertical movement for viewing the content, which is beyond the visible area of the browser screen. Sometimes, front-end developers are required to trigger specific actions on page scroll events.

In this tutorial, we will teach you how to trigger an event on a browser or window scroll and dynamically add or remove CSS classes from a HTML div elements in a React application using the react-scroll-trigger plugin.

The react-scroll-trigger is a React library used for adding smooth and responsive scrolling effects, handling scroll-triggered events, and animations in web, and mobile applications. It’s a powerful component that monitors scroll events to trigger callbacks when it enters, exits, and progresses through the viewport.

How to Add or Remove CSS Class On Browser Scroll in React Js

This guide demonstrates, how to trigger an event on page scroll, add a dynamic class to various HTML sections in React. It permits front-end developers to apply unique formatting, controlling style of web elements which are laid on a web page, and gives control over DOM elements to control dynamic behaviour of web projects.

Setup React Environment

Installing a new React app is easy, you can use the Create React App tool to dynamically install a React framework.

Open the terminal, type the below command and hit enter.

npx create-react-app my-react-app

You have to move into the project folder.

cd my-react-app

Install Required Packages

Next, in our React project we are going to install react scroll trigger and bootstrap libraries. You have invoke the suggested command to add the packages.

npm install react-scroll-trigger bootstrap --legacy-peer-deps

Build Function Component

There are two ways through you can create component in React. A class component or funciton component, we will create the feature using the JavaScript function.

You have to add the code in the components/Home.js file.

import React, { useState } from "react";
import ScrollTrigger from "react-scroll-trigger";

function Home() {
  return (
    <div></div>
  )
}

export default Home

Trigger Event On Scroll

We will now create a React component that monitors scroll events to trigger callbacks when it enters, exits, and progresses through the viewport component.

Update code inside the components/Home.js file.

import React, { useState } from "react";
import ScrollTrigger from "react-scroll-trigger";

function Home() {
  const [isVisible, setIsVisible] = useState();

  function onEnterViewport() {
    setIsVisible(true);
  }

  function onExitViewport() {
    setIsVisible(false);
  }

  return (
    <ScrollTrigger onEnter={onEnterViewport} onExit={onExitViewport}>
      <div className={`${isVisible ? "container-animate" : ""}`} />
    </ScrollTrigger>
  );
}

export default Home;

Next, head over to App.css file, and specify the CSS code.

body {
  height: 1000px;
  background-color: antiquewhite;
}

h2 {
  text-align: center;
}

.container-animate {
  width: 700px;
  height: 200px;
  margin: 0 auto;
  background-color: aqua;
}

Register Component in App

We are now going to register the Home component in the main file, hence open the src/App.js file.

Here you need to import the Home module as given below.

import React from "react";
import "./App.css";
import Home from "./components/Home";

function App() {
  return (
    <div className="container mt-5">
      <h2 className="mb-4">Add or Remove Class on Page Scroll in React</h2>
      <Home />
    </div>
  );
}

export default App;

Run Development Server

We now need to start the React development server; head over to terminal window, here you need to type the below command and hit enter.

npm start

After you evoke the above command, your command line tool will automatically run the app on the default web browser.

http://localhost:3000

Summary

In this detailed guide, we have gone through a series of steps on how to fire an event when the user scrolls the web page, adding a new class to a HTML section gives when it comes to the viewport.

I hope this simple tutorial will help you understand how to add dynamic classes in React using the scroll event.