How to detect page scroll to top in React.js?

Question

I have a UI problem to solve in React. When the user start scroll, will add a background class to the header. When scrolling to the top of the page, header background disappear.

I have figure out how to add the background while scrolling and modify the state, but how to detect whenever user scroll to the top of the page?

Check this: [https://stackoverflow.com/questions/45585542/detecting-when-user-scrolls-to-bottom-of-div-with-react-js](https://stackoverflow.com/questions/45585542/detecting-when-user-scrolls-to-bottom-of-div-with-react-js) — Nada Ghanem, Jun 22 '18 at 02:40

score 16 · Accepted Answer · answered Jun 22 '18 at 02:51

16

You can do it by adding a listener window.onscroll and watch in this listener for window.pageYOffset. Here is the example https://codepen.io/teimurjan/pen/NzMgKz?#.

answered Jun 22 '18 at 02:51

teimurjan

1,875
9
18

@Dr.Dean no problems :) – teimurjan Jun 22 '18 at 03:10
3

how to implement that with useEffect()? – Aykut Kllic Sep 07 '20 at 06:47

score 4 · Answer 2 · answered Jun 14 '21 at 17:37

Here's another version using React Hooks and Functional Components:

const App = () => {
  React.useEffect(() => {
    window.onscroll = () =>
      window.pageYOffset === 0 && console.log("back at top");

    return () => (window.onscroll = null);
  });

  return <div className="container">I'm a very large box</div>;
};

ReactDOM.render(<App />, document.getElementById("root"));

.container {
  height: 500px;
  background-color: blue;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 4em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>
<div id="root"></div>

What about use the same functionality in a child div which has a limited height with scrollY? — Fernando Torres, Jul 13 '22 at 02:27

score 3 · Answer 3 · edited Nov 24 '21 at 21:26

3

const handleScroll = (e: React.UIEvent<HTMLElement>) => {
    if(e.currentTarget.scrollTop === 0) {
       alert("on top")
    }
}

<div onScroll={handleScroll}>
       
</div>

edited Nov 24 '21 at 21:26

JulienRioux

2,853
2
24
37

answered Jun 14 '21 at 16:57

LeulAria

333
3
9

How to detect page scroll to top in React.js?

3 Answers3