next function doesn't called #402

Activity

1. shravan-lambdatest commented on Jun 12, 2024

   

   shravan-lambdatest

   on Jun 12, 2024

   Last edited by shravan-lambdatest

   More actions

   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();
2. sapiens-shahbaz-khan commented on Jul 5, 2024

   

   sapiens-shahbaz-khan

   on Jul 5, 2024

   Last edited by sapiens-shahbaz-khan

   More actions

   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.
3. khuongtp commented on Jul 15, 2024

   

   khuongtp

   on Jul 15, 2024

   More actions

   May I ask is it possible make it trigger next function even if the data is not overflow
4. kasir-barati commented on Nov 8, 2024

   

   kasir-barati

   on Nov 8, 2024

   More actions

   @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.
5. Minh-iP commented on Nov 25, 2024

   

   Minh-iP

   on Nov 25, 2024

   Last edited by Minh-iP

   More actions

   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>