ReactJS - WheelEvent Handler

---

---

In React JS, a WheelEvent handler function is used to respond to mouse wheel movements. It is a way to make our React application interactive when users scroll with their mouse.

Mouse wheel interactions are common in online apps, mainly while scrolling content. So we will see the WheelEvent interface and how to use it to handle mouse wheel events in a React application. The WheelEvent interface shows events that occur when a user moves their mouse wheel or a similar input device. It offers useful information regarding the scrolling actions.

Syntax

<div
   onWheel={e => console.log('onWheel')}
/>

Remember to attach the onWheel event to the element we want to make scrollable. This is just a basic introduction, and we can customize the handler function based on our specific needs.

Parameters

e − It is a React event Object. We can use it with the WheelEvent properties.

Properties of WheelEvent

Examples

Example − Simple App with Wheel Event Handler

Now let's create a small React app to show how to use the WheelEvent in application. Using the WheelEvent interface, we will create a component that tracks scroll events. So the code is given below −

import React from 'react';

class App extends React.Component {
   handleWheelEvent = (e) => {
      console.log('onWheel');
      console.log('deltaX:', e.deltaX);
      console.log('deltaY:', e.deltaY);
      console.log('deltaZ:', e.deltaZ);
      console.log('deltaMode:', e.deltaMode);
   };   
   render() {
      return (
         <div onWheel={this.handleWheelEvent}>
            <h1>Mouse WheelEvent Logger</h1>
            <p>Scroll mouse wheel and check the console for event details.</p>
         </div>
      );
   }
}

export default App;

Output

In this component, we have created an onWheel event handler that logs information about the wheel event like deltaX, deltaY, deltaZ, and deltaMode as we can see in the output.

Example − Scroll Component App

In this example, the handleScroll function is triggered when the user scrolls using the mouse wheel. The event.deltaY gives us information about the direction and intensity of the scroll.

import React from 'react';

class ScrollComponent extends React.Component {
   handleScroll = (event) => {
      // This function will be called when the user scrolls
      console.log('Mouse wheel moved!', event.deltaY);
   };   
   render() {
      return (
         <div onWheel={this.handleScroll}>
            <p>Scroll me with the mouse wheel!</p>
         </div>
      );
   }
}

export default ScrollComponent;

Output

Example − Change Background Color onScroll

Here is another simple React app using the WheelEvent handler function. This time, we will create an app where the background color changes based on the direction of the mouse wheel scroll −

import React, { useState } from 'react';

const ScrollColorChangeApp = () => {
   const [backgroundColor, setBackgroundColor] = useState('lightblue');   
   const handleScroll = (event) => {
      
      // Change the background color based on the scroll direction
      if (event.deltaY > 0) {
         setBackgroundColor('lightgreen');
      } else {
         setBackgroundColor('lightcoral');
      }
   };   
   return (
      <div
         onWheel={handleScroll}
         style={{
            height: '100vh',
            display: 'flex',
            alignItems: 'center',
            backgroundColor: backgroundColor,
            transition: 'background-color 0.5s ease',
         }}
      >
         <h1>Scroll to Change Background Color</h1>
      </div>
   );
};

export default ScrollColorChangeApp;

Output

Summary

The WheelEvent interface is helpful in React applications for handling mouse wheel events. It gives useful information on the user's scrolling behaviors, like scroll direction and intensity. We can create more dynamic and responsive web apps that improve the user experience by using the WheelEvent interface.