ankeetmaini
next function doesn't called
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.
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: https://github.com/ankeetmaini/react-infinite-scroll-component/blob/d5b4e5250669022db5217763afd22fb3995a505a/src/index.tsx#L78
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.
May I ask is it possible make it trigger next function even if the data is not overflow
@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.
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>
