load more function is not getting invoked!

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>

[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>

[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}>