next function doesn't called

[Code-Guru-007]

I'm experiencing an issue where the next function of the InfiniteScroll component doesn't seem to work as expected.
I've tried implementing a simple alert inside the next function, but nothing happens when I scroll to the end of the list.

Thank you.

[shravan-lambdatest]

What is your scrollable region?
If it's the <InfiniteScroll /> itself, pass fixed height and overflow.
If it's some parent pass the scrollableTarget prop.

FYR:

react-infinite-scroll-component/src/index.tsx

Line 78 in d5b4e52

this._scrollableNode = this.getScrollableTarget();

[sapiens-shahbaz-khan]

I'm experiencing an issue where the next function of the InfiniteScroll component doesn't seem to work as expected. I've tried implementing a simple alert inside the next function, but nothing happens when I scroll to the end of the list.

To have the feature working it requires a fixed height and overflow as mentioned above.
I used :

     height: some calculated value,
     overflowY: 'scroll',
    position: 'sticky',

But also to keep in mind the children that you are passing to the Component. In your case the children is not an array of items but a wrapping component. In this case we must use hasChildren prop as false.

[khuongtp]

May I ask is it possible make it trigger next function even if the data is not overflow

[kasir-barati]

@Code-Guru-007 Feel free to check my implementation. It is working. It is connected to a NodeJS backend just in case you where wondering how it works just reach out: https://github.com/kasir-barati/react/blob/c8a2340ea8495303e9c8e36644727af21280aa89/apps/react/src/components/post/InfiniteScrollNews.component.tsx.

Oh, right, I am quite busy too. So please when reaching bear that I might take some time to get back to you.

[Minh-iP]

I encountered the same issue, and here’s a trick that worked for me:
I added an external component (or a dummy div) into the at top or bottom(* >12px and i dunno why) to help trigger the next function. Here’s an example:

  {...props}
>
  <div style={{ height: 20 }}></div> {/* External component to adjust the scroll */}
</InfiniteScroll>