Not getting callback after adding an event listener for scroll event in React.js

Question

I followed the instruction from this post Update style of a component onScroll in React.js to register event listener for scroll event.

I have a React component that ren

Answer 1

Thank you dannyjolie - this work

elementScrollData = (value) => {
  console.log('elementScrollData ', value);
} 
return (
      <div className="css-scroll-class" onScroll={elementScrollData}>
          Scroll element
      </div>
       );
}

Answer 2

For me the only thing that worked was adding true to the third argument in the EventListener:

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

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

Source: https://github.com/facebook/react/issues/5042#issuecomment-145317519

Answer 3

Your code looks good, so it's probably not the window itself that is scrolling. Is the table placed inside a div or something that has overflow: auto or overflow:scroll? If so, the listener must be attached to the actual element that is scrolling, e.g.

document.querySelector('.table-wrapper')
    .addEventListener('scroll', this.handleScroll);

If this is the case, then just adding a React onScroll handler to the wrapper in your code would be better

<div onScroll={this.handleScroll}><Table....