Scroll event handler?

[mauricesvay]

Having a scroll event handler could be useful for loading more items when reaching the bottom of the list.

[caseywebdev]

Simply use onScroll on whatever element contains your list.

<div style={{height: 300, overflow: 'auto'}} onScroll={this.handleScroll}>
  <ReactList ... />
</div>

ReactList does not own the scrollable element.

[caseywebdev]

You may also be interested in the getVisibleRange() function. For example...

handleScroll() {
  const [firstVisibleIndex, lastVisibleIndex] = this.list.getVisibleRange();
  if (lastVisibleIndex >= theIndexIWantToLoadMoreAt) loadMore();
}

render() {
  return (
    <div style={{height: 300, overflow: 'auto'}} onScroll={this.handleScroll}>
      <ReactList ref={c => this.list = c} ... />
    </div>
  );
}

[mauricesvay]

Thanks! I didn't realize that the scroll was on the parent and that I could listen to this event.

Thanks for your help!

[caseywebdev]

No problem

[tnrich]

Any chance this info could go into the docs? It took me awhile to find it here in the issues.

Thanks!

[caseywebdev]

If you'd like to add it to the FAQ section feel free to open a PR.

[tnrich]

I PR'd it: #150

[SoloJiang]

Cool!

[BeckhamVinoth]

@ALL , Am using this.list.getVisibleRange() .. this is returning me undefined . ..any idea on this ?

[BeckhamVinoth]

const [firstVisibleIndex, lastVisibleIndex] = this.list.getVisibleRange();
// in console ----> [undefined, undefined]

[funk101]

is it possible to access getVisibleRange() within an es6 functional component? All the examples show it available using the "this" keyword -> this.getVisibleRange(). How can I implement this method without defining in a class?