Handle the onScroll event in React (with examples)

Handle the onScroll event in React (with examples) #

To handle the onScroll event in React:

Set the onScroll prop on an element or add an event listener on the window object.
Provide an event handler function.
Access relevant properties on the event or window objects.

App.js

Copied!
const App = () => {
  const handleScroll = event => {
    console.log('scrollTop: ', event.currentTarget.scrollTop);
    console.log('offsetHeight: ', event.currentTarget.offsetHeight);
  };

  return (
    <div
      style={{
        border: '3px solid black',
        width: '400px',
        height: '100px',
        overflow: 'scroll',
      }}
      onScroll={handleScroll}
    >
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
    </div>
  );
};

export default App;

react onscroll div

The example shows how to handle the onScroll event on a div element in React.

Here is an example that listens for the scroll event on the window object.

App.js

Copied!
import {useEffect} from 'react';

const App = () => {
  useEffect(() => {
    const handleScroll = event => {
      console.log('window.scrollY', window.scrollY);
    };

    window.addEventListener('scroll', handleScroll);

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

  return (
    <div
      style={{
        border: '3px solid black',
        width: '400px',
        height: '1000rem',
      }}
    >
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
    </div>
  );
};

export default App;

react onscroll window

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

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

We used the removeEventListener method to remove the event listener that we previously registered.

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

The scrollY property on the window object returns the number of pixels that the document is currently scrolled vertically.

If you set the onScroll prop on an element, you would use the Element.scrollTop property instead.

The scrollTop property gets or sets the number of pixels that an element's content is scrolled vertically.

App.js

Copied!
const App = () => {
  const handleScroll = event => {
    console.log('scrollTop: ', event.currentTarget.scrollTop);
    console.log('offsetHeight: ', event.currentTarget.offsetHeight);
  };

  return (
    <div
      style={{
        border: '3px solid black',
        width: '400px',
        height: '100px',
        overflow: 'scroll',
      }}
      onScroll={handleScroll}
    >
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
    </div>
  );
};

export default App;

Notice that we used the currentTarget property on the event object to get access to the element.

The currentTarget property on the event gives us access to the element that the event listener is attached to.

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

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

Handle the onScroll event in React (with examples)

Handle the onScroll event in React (with examples) #

Borislav Hadzhiev