How can I apply and delete a css class only while scrolling in a React application?

Question

How can I apply and delete a css class only while scrolling in a React application?

Currently, I am designing a pretend blog layout to showcase my work. The grid of posts features cards that are precisely 400x400 in size with a hover effect that magnifies and adds a drop shadow (this is visible in the dashboard route).

However, an issue arises when scrolling through the page as the cursor tends to get stuck on the cards, halting the scroll functionality during the animation. While researching a solution, I stumbled upon an article () which discusses the performance advantages of disabling pointer events to the body while scrolling. Unfortunately, I am having trouble implementing this concept in React.

Is there a way to apply a class to the document body only while scrolling in React and remove it once the scrolling ceases? Possibly using a setTimeout method? I fear that such an approach might be inelegant...

I have provided the code where I intend to integrate this behavior. Although uncertain if it will provide clarity, the existing scroll event setup is designed to maintain page position as the navbar extends.

export default class Layout extends Component {
  // Code snippet here
}

As an attempt to resolve this, I experimented with setting

document.body.style.pointerEvents = 'auto'

in the componentDidMount() method and then disabling it within handleScrollY(). However, this approach proved ineffective since the pointer events were not restored post-scroll event. Similarly, I tested placing the logic in componentDidUpdate(), but encountered issues since no component was updating while the scrolling event wasn't active.

javascript css reactjs event-handling css-animations

Answer 1

Answer №1

Here is a method to toggle a CSS class:

componentWillUnmount() {
  document.removeEventListener('scroll');
}
componentDidMount() {
  document.addEventListener('scroll', (event) => {
    const that = this;
    if (!that.state.isScrolling) {
      that.setState({ isScrolling: true });
      setTimeout(() => {
        that.setState({ isScrolling: false });
      }, 300);
    }
  });
}

You can then use the state or props to toggle the className

In your JSX, it would look something like this:

return (
  <div className={`class1 class2 class99 ${this.state.isScrolling ? 'scrolling' : 'not-scrolling'}`} >Content</div>
)

Answer 2

Here is a method to toggle a CSS class:

componentWillUnmount() {
  document.removeEventListener('scroll');
}
componentDidMount() {
  document.addEventListener('scroll', (event) => {
    const that = this;
    if (!that.state.isScrolling) {
      that.setState({ isScrolling: true });
      setTimeout(() => {
        that.setState({ isScrolling: false });
      }, 300);
    }
  });
}

You can then use the state or props to toggle the className

In your JSX, it would look something like this:

return (
  <div className={`class1 class2 class99 ${this.state.isScrolling ? 'scrolling' : 'not-scrolling'}`} >Content</div>
)

How can I apply and delete a css class only while scrolling in a React application?

Answer №1

Similar questions

Add a fresh item to a list using jQuery

HTML - Customizing container with background color and ensuring minimum height of 100%

Deciphering the '$' symbol in the Cheerio API

The image remains unchanged in the JavaScript function

Innovative way to design a menu using HTML, CSS, and JavaScript that dynamically resizes to a specific width

In my current Next.js project, I tried setting up a new [collectionId].jsx file within the pages directory, but I am facing issues with getting

Error: Uncaught ReferenceError: d3 is undefined. The script is not properly referenced

Generating a client-side MD5 hash for an image file in order to compare it to the hash calculated by Firebase?

I am facing an issue where reducing the size of the renderer is causing my click events to be offset. What steps can I

Unusual trait of TrackballControls.target within the world of Three.js

Exclude the data key from form submission based on condition in React

Why is TypeScript resorting to using 'any' for specific prop type definitions in React?

Implement a feature in JSP that allows users to dynamically add or remove fields before submitting the data to the database

What are the best practices for properly deploying a React Vite project in production mode?

Creating a dynamic select input in React that displays a default value based on other user inputs

Add unique styles to a jQuery-included HTML document

How to access the current class in Sass without referencing the parent class

Exploring the Power of GraphQL Args in Mutation Operations

The <el-dropdown> function is currently facing a problem and is unavailable for use

Experimenting with a sample post on a minimalist Node.js application using Mocha and Superagent