React onScroll not working

Question

I'm trying to add onscroll event handler to specific dom element. Look at this code:

class ScrollingApp extends React.Component {
    ...
    _handleScroll(ev) {
        console.log("Scrolling!");
    }
    componentDidMount() {
        this.refs.list.addEventListener('scroll', this._handleScroll);
    }
    componentWillUnmount() {
        this.refs.list.removeEventListener('scroll', this._handleScroll);
    }
    render() {
        return (
            <div ref="list">
                {
                    this.props.items.map( (item) => {
                        return (<Item item={item} />);
                    })
                }
            </div>
        );
    }
}

Code is quite simple, and as you can see, I want to handle div#list scrolling. When I was running this example, it isn't working. So I tried bind this._handleScroll on render method directly, it doesn't work either.

<div ref="list" onScroll={this._handleScroll.bind(this)> ... </div>

So i opened chrome inspector, adding onscroll event directly with:

document.getElementById('#list').addEventListener('scroll', ...);

and it is working! I don't know why this happens. Is this a bug of React or something? or did I missed something? Any device will very appreciated.

It's working for me (webpackbin.com/V1ECCW5Vb), scroll within the block and then click the "Log" button at top of page to see the logs. — ctrlplusb
– ctrlplusb, Commented Jun 15, 2016 at 9:40

rzymek · Accepted Answer · 2016-06-15 11:08:03Z

10

The root of the problem is that this.refs.list is a React component, not a DOM node. To get the DOM element, which has the addEventListener() method, you need to call ReactDOM.findDOMNode():

class ScrollingApp extends React.Component {

    _handleScroll(ev) {
        console.log("Scrolling!");
    }
    componentDidMount() {
        const list = ReactDOM.findDOMNode(this.refs.list)
        list.addEventListener('scroll', this._handleScroll);
    }
    componentWillUnmount() {
        const list = ReactDOM.findDOMNode(this.refs.list)
        list.removeEventListener('scroll', this._handleScroll);
    }
    /* .... */
}

answered Jun 15, 2016 at 11:08

rzymek

9,3712 gold badges51 silver badges60 bronze badges

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

1 Comment

Charles L. Over a year ago

findDOMNode is deprecated. Instead of setting your div ref to "list" you need to set it up using <div ref={node => this.list = node} and then your mount/unmount functions can access the variable directly, without having to find the node, this.list.addEventListener(...

Collectives™ on Stack Overflow

React onScroll not working

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related