How to Handle the onScroll event in React

This article will show you how to handle the onKeyDown event in React, along with a detailed example. The methods outlined in the article are to use the window object or handle by the event object.

Handle the onScroll event in React 

The onscroll attribute is fired when a card’s scrollbar is used. We can check where the user is scrolling so that we can easily script the website.

Using the window object

The window is a browser object. String, Array, Date, and other objects are javascript objects. Note: The browser will produce additional window objects for each frame in the HTML document that contains frames or iframes. We can use this object to check the current position of the user scrolling so it can be easily handled in React.

Code:

import { useEffect } from "react";

const App = () => {
  useEffect(() => {
    const handleOnScroll = () => {
      console.log( window.scrollY);
    };
    window.addEventListener("scroll", handleOnScroll);
  }, []);

  return (
    <div
      style={{
        height: "1000rem",
      }}
    >
      <h2 style={{ height: "50rem"}}>
        Header
      </h2>
      <h2 style={{ height: "50rem"}}>
        Content
      </h2>
      <h2 style={{ height: "50rem"}}>
        Footer
      </h2>
    </div>
  );
};

export default App;

Output:

Here we set the window object onscroll event so we can handle it in the handleScroll function, which is to print the current position to the screen. To do this, we access the window.scrollY value so we can get the vertical value we are scrolling to.

Handle the onScroll with the event object

In this approach, we will handle the onScroll event on a div tag with limited length, height, and scrollable. When you set the onscroll event for this div, you can get values ​​like scrollTop in the event. The scrollTop will either get the current vertical position of the scrollbar for the first element in a set of matched elements or set the vertical position of the scrollbar for each matched element.

Code:

const App = () => {
  const handleScroll = event => {
    console.log(event.currentTarget.scrollTop);
  };

  return (
    <div
    style={{
      width: '1000px',
      height: '200px',
      overflow: 'scroll',
    }}
    onScroll={handleScroll}
  >
    <h2 style={{ height: "50rem"}}>
      Header
    </h2>
    <h2 style={{ height: "50rem"}}>
      Content
    </h2>
    <h2 style={{ height: "50rem"}}>
      Footer
    </h2>
  </div>
  );
};

export default App;

Output:

When you scroll to where the program will print the scrollTop value of the div tag containing the scroll event, this is a case where you will have to deal with a lot in real-life situations. In the code example above, the content is placed inside the <div> tag so we can scroll to it. Good luck with the methods mentioned in the article

Summary

In summary, the article has shown you how to handle the onScroll event in React, along with detailed examples. However, we recommend you handle the onScroll event with the window object because this object helps us in more cases.

Nathaniel Kirk

Hi, my name’s Nathaniel Kirk. I’m interested in learning and sharing knowledge about programming languages. My strengths are C, C++, Python, HTML, CSS, Javascript, and Reactjs. If you have difficulty with them, don’t worry. I’m here to support you.

---

Name of the university: PTIT
Major: IT
Programming Languages: C, C++, Python, HTML, CSS, Javascript, Reactjs