How to add `onscroll` event in ReactJS component

App.js

import React from 'react';

let lastScrollY = 0;
let ticking = false;

class App extends React.Component {
  componentDidMount() {
    window.addEventListener('scroll', this.handleScroll, true);
  }

  componentWillUnmount() {
    window.removeEventListener('scroll', this.handleScroll);
  }
    
  nav = React.createRef();
  
  handleScroll = () => {
    lastScrollY = window.scrollY;

    if (!ticking) {
      window.requestAnimationFrame(() => {
        this.nav.current.style.top = `${lastScrollY}px`;
        ticking = false;
      });
   
      ticking = true;
    }
  };

  render() {
    return (
      <div>
        <nav ref={this.nav}>
        </nav>
      <div>
    );
  }
}

export default App;

@ffxsam solution worked fine for me too.

@jylopez @EEtancelin best solutions, thx!

solved my problem thanks

If anyone is thinking they are going crazy that it's not working for them, while everyone else is piling on saying it does, try this:

  componentDidMount() {
    window.addEventListener('scroll', this.handleScroll, true);
  }

Note, the third argument of "true".

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

@paintedbicycle thank you! now it works.

If anyone is thinking they are going crazy that it's not working for them, while everyone else is piling on saying it does, try this:

  componentDidMount() {
    window.addEventListener('scroll', this.handleScroll, true);
  }

Note, the third argument of "true".

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

Worked for me!

window.addEventListener('scroll', this.handleScroll, true);

Thanks!

@paintedbicycle Thank you!! This worked for me

Thanks this is exactly what I needed to do for a ShadowDOM supported div that used onScroll.
Turns out ShadowDOM does not support scroll listener, it's essentially blocked.

What I did was:

const listNode = ReactDOM.findDOMNode(this.list);
listNode.addEventListener('scroll', this.handleScroll);

and it worked! 🎉

If anyone is thinking they are going crazy that it's not working for them, while everyone else is piling on saying it does, try this:

  componentDidMount() {
    window.addEventListener('scroll', this.handleScroll, true);
  }

Note, the third argument of "true".

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

Worked for me

thank you very much @paintedbicycle

This worked for me:

constructor(props) {
  super(props);
  this.handleScroll = this.handleScroll.bind(this);
}

componentDidMount() {
  window.addEventListener('scroll', this.handleScroll);
};

componentWillUnmount() {
  window.removeEventListener('scroll', this.handleScroll);
};

handleScroll(event) {
  console.log('the scroll things', event)
};

your solution worked for me. Thank you for this

@raheemazeezabiodun Note, that if you use an arrow function syntax for declaring custom handlers, you won't need to bind them to this inside of a constructor function:

constructor(props) {
  supert(props);
  this.handleScroll = this.handleScroll.bind(this);
}

handleScroll(event) { ... };

vs

handleScroll = (event) => { ... };

Is anyone having issues with the event returning as undefined?