React-custom-scrollbars: End of scroll hook?

[madshargreave]

Hi

I am trying to implement an infinite scroll component using this.

Is there any way to hook into the scroll event and say something like if the scrollTop is within 50px of the bottom, then fire a callback?

[malte-wessel]

You can easily implement this with the following code:

const MyScrollbars = createClass({
  handleAboutToReachBottom() {
    // load more
  }
  handleUpdate(values) {
    const { scrollTop, scrollHeight, clientHeight } = values;
    const pad = 100; // 100px of the bottom
    // t will be greater than 1 if we are about to reach the bottom
    const t = ((scrollTop + pad) / (scrollHeight - clientHeight));
    if (t > 1) this.handleAboutToReachBottom();
  },
  render() {
    return <Scrollbars onUpdate={this.handleUpdate}/>;
  }
});

Have a look at the API Documentation