load more function is not getting invoked!

[developerk786]

Load More function is not getting invoked when scroll to down *Expected to see "loaded!"' two three times but not, please help me

       loadMoreBooks = async () => {
         console.log('loaded!');
         const data = await db.collection('books').get();
         let books = this.state.books;
         data.forEach(book => {
           books = [...books, { id: book.id, ...book.data() }];
         });
         this.setState({ books });
      };

     // Render Method
          <InfiniteScroll
            pageStart={0}
            loadMore={this.loadMoreBooks}
            hasMore={hasMoreBooks}
            loader={
              <div className="loader" key={0}>
                Loading ...
              </div>
            }
          >
            <Tiles maxCount={4}>{bookList}</Tiles>
          </InfiniteScroll>

[andrelmlins]

It's the same here

[developerk786]

@andrelmlins let me know if you solved somehow

[erksch]

Same problem! Any solutions?

[andrewpjames13]

For a temporary fix while they figure that out I went from "react-infinite-scroller": "^1.2.2" to "react-infinite-scroller": "^1.2.1" and then it started working again.

[Ahsan-J]

Having the same issue in "react-infinite-scroller": "^1.2.4". load more is not invoking when I scroll down to the end of the list. Didn't they fix this issue yet?

[GarrettJMU]

Also seeing the same issue I tried 1.2.1 and 1.2.4 with no luck

[BeanMc]

same issue. hopeless! 1.2.1 and 1.2.4

[arpitprod]

version 1.2.4 was working before but not working from last few days

[ckarle]

We're on 1.2.2 and setting useWindow to false restores the loading behavior, if that's an option for your case.

[TimorCookie]

For a temporary fix while they figure that out I went from "react-infinite-scroller": "^1.2.2" to "react-infinite-scroller": "^1.2.1" and then it started working again.

doesn't work.. "react-infinite-scroller": "^1.2.1",

[mykyta-nikiforov]

Have the same issue on v1.2.4

[totemtec]

I found the point.

1. if your scroll area not window, userWindow={false}
2. make sure the InfiniteScroll tag directly wrap the scroll area like that <InfiniteScroll><YourScrollDiv> other children ... </YourScrollDiv></InfiniteScroll>

[TiagoFuelber]

Same issue here with 1.2.1 and 1.2.4

[erwista]

How to make it in dropDown @totemtec? when you have like:

dropDownRender={ children => ( <InfiniteScroll pageStart={ lastPage } loadMore={ handleInfiniteOnLoad } hasMore={ hasMoreRefCodes } useWindow={ false } > { children } </InfiniteScroll> ) }

[olelivalife]

Did you ever resolve this? If so, how?

[hennadiy-kudashev]

If any upper element has 'overflow: auto;' defined, it means that scroll area is not window anymore:

1. userWindow={false}
2. define getScrollParent function to return 'scroll area' dom element

<InfiniteScroll ... getScrollParent={()=>document.getElementById('el-which-has-overflow-defined')} useWindow={false}>

[radarfox]

@totemtec @hennadiy-kudashev It's named useWindow, not userWindow

[pratyush-shivam]

Yeah it is useWindow not userWindow

[Shivaansh-Agarwal]

If any upper element has 'overflow: auto;' defined, it means that scroll area is not window anymore:

1. userWindow={false}
2. define getScrollParent function to return 'scroll area' dom element

<InfiniteScroll ... getScrollParent={()=>document.getElementById('el-which-has-overflow-defined')} useWindow={false}>

Thank you so much! This works! I'm on version 1.2.4

[kszlachetka-bolt]

None of the above worked for me I'm afraid, the load more function either wasn't called or was called twice depending on the screen size and some other styling, so I've ended up replacing this component with another one, fairly compatible: https://www.npmjs.com/package/react-infinite-scroll-component

and that resolved the issue for me.