How to add scroll event in react component

Question

I\'m trying to add an onScroll event on a table. This is what I\'ve tried:

componentDidMount() {
    ReactDOM.findDOMNode(this.refs.table).addEv         


        

Answer 1

I had been finding a good solution to this problem. The following piece of code is working, where the listener is just on the particular class/div : React version is 16.0.0

First import ReactDOM, import ReactDOM from "react-dom";

Then in the class xyz extends Component section

  constructor(props) {
    super();
    this.state = {
        vPos : 0
    }
    this.listenScrollEvent = this.listenScrollEvent.bind(this);
  }

  componentDidMount() {
    ReactDOM.findDOMNode(this.refs.category_scroll).addEventListener('scroll', this.listenScrollEvent);
  }

  componentWillUnmount() {
      ReactDOM.findDOMNode(this.refs.category_scroll).removeEventListener('scroll', this.listenScrollEvent);
  }

  listenScrollEvent(event) {
    console.log('firee');
    this.setState({
        vPos: event.target.body.scrollTop
    });
  }

After pasting the above functions, in the render() method , whatever you want to name the ref method, you can do so, make sure the same name goes in the findDOMNode as well , i.e, findDOMNode(this.refs.category_scroll):

...

---

.

.

If it's a horizontall scroll, then event.currentTarget.scrollTop works in the listenScrollEvent() function.