How to get the index when scroll the mouse? #203

class ChildElement extends React.Component
{    render() {
        return (<h1>Hello, world {this.props.id} </h1>);
}}
const renderItem = (index, key) =>
      <div key ={key}>
        <ChildElement id={index}/>
      </div>;

export class AnalysisPage extends React.Component {
//...constructor details here.....

//Way #1 failed
    componentDidUpdate(prevProps, prevState) {
//this doesn't work, seems like after rendering, the scroll doesn't update the whole component anymore.
        console.log(this.refs.inflist.getVisibleRange());    
    }

//Way #2 failed
    handleScroll(){
//this doesn't work property either. As I shown on the attached graph. The returned array are most [undefined, undefined].
        console.log(this.refs.inflist.getVisibleRange());   
    }

    render() {
        var myProps =
            {
                length: 10000,
                itemRenderer: renderItem,
                type: 'uniform',
                useStaticSize: true,
            };
        return (
            <div>
              <div>
                <p>{this.state.range}</p>
              </div>
              <div style={{height:300, overflow: 'auto'}} onScroll={this.handleScroll}>
                <ReactList id = "inflist" ref = "inflist" {...myProps}/>
              </div>
             </div>
        );
    }