Implementing infinite scroll on top when scrolling using library (I have live code sample)

Question

I am trying to implement with the help of this library react-infinite-scroll-component (documentation) to do an infite scroll, my idea is to have the infinite scroll at the top.

I am using the live demo(code sample) provided by this library, but I am unable to implement the infinite scroll at the top, I don't know what I am doing wrong.

In the library they mention this to achieve this:

Using scroll on top

    <div
    id="scrollableDiv"
    style={{
        height: 300,
        overflow: 'auto',
        display: 'flex',
        flexDirection: 'column-reverse',
    }}
    >
    {/*Put the scroll bar always on the bottom*/}
    <InfiniteScroll
        dataLength={this.state.items.length}
        next={this.fetchMoreData}
        style={{ display: 'flex', flexDirection: 'column-reverse' }} //To put endMessage and loader to the top.
        inverse={true} //
        hasMore={true}
        loader={<h4>Loading...</h4>}
        scrollableTarget="scrollableDiv"
    >
        {this.state.items.map((_, index) => (
        <div style={style} key={index}>
            div - #{index}
        </div>
        ))}
    </InfiniteScroll>
    </div>

I try to replace it but it doesn't work, what am I doing wrong?

Answer 1

You can try the below code and check if it works for your query.

 <InfiniteScroll
    dataLength={this.state.items.length + Math.floor(Math.random() * 18) + 1}
     next={this.fetchMoreData}
     style={{ display: 'flex', flexDirection: 'column-reverse' }}
     hasMore={this.state.hasMore}
     loader={
       <div className="loading">
         Loading ...
       </div>
     }
     height={'calc(100vh - 10px)'}
     endMessage={<span />}
     refreshFunction={this.fetchMoreData}
     pullDownToRefresh={true}
     pullDownToRefreshContent={
       <div style={{ textAlign: 'center' }}>Circle SVG/img</div>
     }
     releaseToRefreshContent={
       <div style={{ textAlign: 'center' }}>Circle SVG/img</div>
     }
      >
       {
         this.state.items.map((_, index) => (
          <div style={style} key={index}>
            div - #{index}
          </div>
        ))
      }             
</InfiniteScroll>