How to get the index when scroll the mouse?

[bfang711]

When I scroll the mouse down, I would like to get the index or [first Visible index, last Visible index]. I would like to use getVisibleRange(), however not successful. Here are what I tried.

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

So my question is what the way to get the index as a result of the action of scrolling the mouse.
thank you.

[bfang711]

Some corrections.
Way #2 using handleScroll() works properly only when I click the up/down arrow of the scrollbar. However if I drag the scroll bar to somewhere, it returns as above [undefined, undefined].

Do we know how to get this working properly?

thank you.