JIYIK CN >

Handling onScroll events on div elements in React

Handling onScroll event in React:

1. Set the property on the element onScrollto listen for scroll events.
2. Provides event handling functions.
3. Access event.currentTarget.scrollTopthe property to get the number of pixels to scroll vertically.

import {useState} from 'react';

export default function App() {
  const [scrollTop, setScrollTop] = useState(0);

  const handleScroll = event => {
    setScrollTop(event.currentTarget.scrollTop);
  };

  return (
    <div>
      <h2>Scroll Top: {scrollTop}</h2>

      <div
        style={{
          border: '3px solid black',
          width: '400px',
          height: '100px',
          overflow: 'scroll',
        }}
        onScroll={handleScroll}
      >
        {[...Array(20)].map((_, index) => (
          <p key={index}>Content {index}</p>
        ))}
      </div>
    </div>
  );
}

We set onScrollthe property on the div element, so each time the user scrolls the div's horizontal or vertical axis, handleScrollthe function will be called.

请注意, we use the event object's currentTargetproperty to access the element.

const handleScroll = event => {
  setScrollTop(event.currentTarget.scrollTop);
};

The event's currentTargetproperty gives us access to the element to which the event listener is attached.

On the other hand, the target property of the event gives us a reference to the element (possibly a descendant) that triggered the event.

We use Element.scrollTopthe property to get the number of pixels to scroll the element's content vertically.

The final step is to update the state variables using useStatethe hook.

setScrollTop(event.currentTarget.scrollTop);

setScrollTopThe function is responsible for updating the state variable every time the div's vertical axis is scrolled scrollTop.

We can use the method to handle events addEventListeneron the window object .onScroll

Handling onScroll event on window object in React

To handle the onScroll event on the window object:

1. Adds a scroll event listener to useEffectthe window object in the hook.
2. Use window.scrollYthe property to get the number of pixels to scroll the document vertically.

import {useEffect, useState} from 'react';

const App = () => {
  const [scrollTop, setScrollTop] = useState(0);

  useEffect(() => {
    const handleScroll = event => {
      setScrollTop(window.scrollY);
    };

    window.addEventListener('scroll', handleScroll);

    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, []);

  return (
    <div>
      <div
        style={{
          position: 'fixed',
          padding: '10px 0',
          top: '0',
          backgroundColor: 'white',
          borderBottom: '3px solid black',
          width: '100%',
        }}
      >
        <h2>Scroll Top: {scrollTop}</h2>
      </div>

      <div style={{marginTop: '10rem'}}>
        {[...Array(100)].map((_, index) => (
          <p key={index}>Content {index}</p>
        ))}
      </div>
    </div>
  );
};

export default App;

addEventListenerThe method takes the following 2 parameters:

• Type Enter the event type to be monitored
• The function called when the listener event is triggered

Scroll events are fired when the document view is scrolled.

We pass an empty dependenciesarray to the useEffect hook because we only want to register the scroll event listener once - when the component mounts.

useEffect(() => {
  const handleScroll = event => {
    setScrollTop(window.scrollY);
  };

  window.addEventListener('scroll', handleScroll);

  return () => {
    window.removeEventListener('scroll', handleScroll);
  };
}, []);

We use window.scrollYthe property to update the scrollTop state variable.

The window object's window.scrollYscroll property returns the number of pixels the document is currently scrolled vertically.

If we set the attribute on the element onScroll, we will use Element.scrollTopthe attribute instead, as shown in the previous subheading.

The function we return from the useEffect hook is called when the component unmounts.

return () => {
  window.removeEventListener('scroll', handleScroll);
};

We use removeEventListenerthe method to remove the event listener we registered previously.

removeEventListenerThe method takes the following 2 parameters:

• typeType the event type for which you want to remove the event listener
• listener The event listener function of the event handler to be removed from the event target

The cleanup step is important because we want to make sure that we don't have any memory leaks in our application.

scrollTopProperty returns the number of pixels to scroll the element's content vertically.