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

Is table content overflowing table boundaries? It not, it won't scroll. — Andreyco
– Andreyco, Commented Sep 5, 2016 at 7:31
the container has overflow: auto that means the table is inside a frame(if I'm correct). I don't want to use the window.addEventListener — Lord Salforis
– Lord Salforis, Commented Sep 5, 2016 at 7:45
For those who are implementing the same as mine but is using django, try using django-el-pagination. It has paginateOnScroll already. — Lord Salforis
– Lord Salforis, Commented Sep 6, 2016 at 9:07

Elad Katz · Accepted Answer · 2017-10-30 19:13:23Z

23

You need to bind this to the element in context.

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

edited Oct 30, 2017 at 19:13

Elad Katz

7,6215 gold badges38 silver badges68 bronze badges

answered Sep 5, 2016 at 7:59

Harkirat Saluja

8,1145 gold badges53 silver badges74 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Anton Kulakov Over a year ago

If you use ES6 Class for creating component.

Lord Salforis Over a year ago

I already did at the constructor but still doesn't work. constructor(props) {super(props); this.listenScrollEvent = this.listenScrollEvent.bind(this);}

Jules Over a year ago

While this is generally useful, note that the listenScrollEvent method in the original question doesn't do anything with this so binding it is actually unnecessary.

Faris Rayhan Over a year ago

Well this actually helps me for some reason. It is simple and to the point

Anton Kulakov · Accepted Answer · 2016-09-05 07:59:06Z

8

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/

edited Sep 5, 2016 at 7:59

answered Sep 5, 2016 at 7:46

Anton Kulakov

5021 gold badge3 silver badges13 bronze badges

2 Comments

Lord Salforis Over a year ago

I thought putting onScroll event on an element is not enabled in react? o_0

Lord Salforis Over a year ago

I tried changing it to onClick and it works... now back to the problem of onScroll

tlagreca · Accepted Answer · 2018-08-03 03:46:04Z

7

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

answered Aug 3, 2018 at 3:46

tlagreca

3651 gold badge6 silver badges20 bronze badges

2 Comments

juanitogan Over a year ago

I suspect this is the correct answer even though the asker said he didn't want to use window... in the comments. Yet, in the comments he also failed to answer the first question of whether the table contents are overflowing. I suspect the answer is really "no" since no other answers work for him. He doesn't tell us much about his ultimate goal so I can only guess he's going for a fixed/absolute table that will never scroll except with window. I was having similar trouble at first until I got the hint that scroll only fires on objects that overflow, so I looked it up and, yup, that was it.

Jason G Over a year ago

you can have more than 1 scrolling component on a window, so not so great.

score 1 · Accepted Answer · 2019-01-12 09:07:30Z

1

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.

edited Jan 12, 2019 at 9:07

answered Jan 12, 2019 at 9:02

user5125954

Comments

Shivansh Jagga · Accepted Answer · 2019-01-12 08:34:37Z

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.

OSA413 · Accepted Answer · 2024-11-15 07:14:57Z

0

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.

answered Nov 15, 2024 at 7:14

OSA413

4942 gold badges8 silver badges17 bronze badges

Comments

MCSLI · Accepted Answer · 2016-12-31 07:12:13Z

-1

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

answered Dec 31, 2016 at 7:12

MCSLI

3314 silver badges6 bronze badges

Collectives™ on Stack Overflow

How to add scroll event in react component

7 Answers 7

4 Comments

2 Comments

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

4 Comments

2 Comments

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related