CODEWITHSUNDEEP
reactjsscroll
justunknown
justunknown

Reputation: 55

onScroll React cannot trigger

why if i using onScroll react version 16 cannot fire how to make it work. because i want using onScroll than onWheel?.

import ReactDom from 'react-dom'

constructor(props) {
    super(props);
    this._fireOnScroll = this.fireOnScroll.bind(this);
}

fireOnScroll() {
    console.log('Fire!');
}

componentDidMount() {
    const elem = ReactDOM.findDOMNode(this.refs.elementToFire);
    elem.addEventListener('scroll', this._fireOnScroll, true);
}

componentWillUnmount() {
    const elem = ReactDOM.findDOMNode(this.refs.elementToFire);
    elem.removeEventListener('scroll', this._fireOnScroll);
}

render() {
    return (
        <div ref="elementToFire">
      <AnotherComponent imagesUrl={Array(100)}}>}
    </div>
</div>
    );
}

Upvotes: 2

Views: 7918

Answers (2)

Aniketh Saha
Aniketh Saha

Reputation: 913

Your ref is not properly assigned to the div it should be <div ref = {this.elementToFire} > If not works then try

const elem = ReactDOM.findDOMNode(this.refs.elementToFire.current); Also from the code you have given O guess you missed to create a ref object also

this.elementToFire = React.createRef();

Hope it will work

Upvotes: 0

Daniel Hilgarth
Daniel Hilgarth

Reputation: 174477

Your div is empty. scroll only fires if actual scrolling did happen.
So, your div needs to be smaller than its content and needs to show scrollbars.

See this pen for a working example.

However, there is no reason for using a ref. Simply use onScroll:

<div style={{height: 75, width: 100, overflow:'scroll'}} onScroll={this.fireOnScroll}>

See this pen for a working example.

Upvotes: 3

Related Questions