CODEWITHSUNDEEP
javascriptreactjsecmascript-6
Lord Salforis
Lord Salforis

Reputation: 602

How to add scroll event in react component

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

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

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

listenScrollEvent() {
    console.log('Scroll event detected!');
}

render() {
    return (
        <table ref="table">
           [...]
        </table>
    )
}

I tried console.log(ReactDOM.findDOMNode(this.refs.table)) and I'm getting the correct result but scroll event is never fired at all. I looked in here but still failed. Any help would be so much appreciated.

Upvotes: 30

Views: 72332

Answers (7)

OSA413
OSA413

Reputation: 476

In case if you are still struggling with not being able to detect scroll event from a table, try to attach the even listener to the parent component because it may be limiting the height/width of the table.

From:

<div className="max-h-[75vh]">
        <table onScroll={listenScrollEvent}>

To:

<div className="max-h-[75vh]" onScroll={listenScrollEvent}>
        <table>

Note: max-h-[75vh] is a Tailwind style.

Upvotes: 0

user5125954
user5125954

Reputation:

according to React documents(https://reactjs.org/docs/handling-events.html),

React events are named using camelCase, rather than lowercase. You can set attributes as you do with pure HTML.

HTML:

<div onclick="..." onscroll="...">
  ...
</div>

JSX:

<div onClick={...} onScroll={...}>
  ...
</div>

you should create a wrapper block element which has fixed height to enable scroll.

Upvotes: 1

Shivansh Jagga
Shivansh Jagga

Reputation: 1861

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): 

<div onScroll={this.listenScrollEvent} ref="category_scroll">
...
</div>

.

.

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

Upvotes: 0

tlagreca
tlagreca

Reputation: 365

I was looking to do something similar. Adding the event listener to the window instead of the ReactDom.findDOMNode worked for me...

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

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

handleScrollToElement(event) {
    console.log('Fired ' + event)
}

Upvotes: 7

Harkirat Saluja
Harkirat Saluja

Reputation: 8114

You need to bind this to the element in context.

render() {
    return (
        <table ref="table" onScroll={this.listenScrollEvent.bind(this)}>
           [...]
        </table>
    )
}

Upvotes: 23

MCSLI
MCSLI

Reputation: 331

Give this a try, added .bind(this) to this.listenScrollEvent when you pass it to the addEventListener.

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

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

    listenScrollEvent() {
        console.log('Scroll event detected!');
    }

    render() {
        return (
            <table ref="table">
               [...]
            </table>
        )
    }

Upvotes: -1

Anton Kulakov
Anton Kulakov

Reputation: 502

You can use onScroll attribute:

listenScrollEvent() {
    console.log('Scroll event detected!');
}

render() {
    return (
        <table onScroll={this.listenScrollEvent}>
           [...]
        </table>
    )
}

Here is an example: https://jsfiddle.net/81Lujabv/

Upvotes: 8

Related Questions