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

user_16919673 0
Viewed 1476

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?

reactjs
2 Answers

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

Try below code it's working !

<div id="scrollableDiv" style={{
          height: 300,
          overflow: "auto",
          display: "flex",
          flexDirection: "column-reverse"
        }}>
          <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"
            // below props only if you need pull down functionality
            refreshFunction={this.fetchMoreData}
            pullDownToRefresh
            pullDownToRefreshThreshold={50}
            pullDownToRefreshContent={
              <h3 style={{ textAlign: 'center' }}>&#8595;</h3>
            }
            releaseToRefreshContent={
              <h3 style={{ textAlign: 'center' }}>&#8593;</h3>
            }
          >
            {this.state.items.map((_, index) => (
              <div style={style} key={index}>
                div - #{index}
              </div>
            ))}
          </InfiniteScroll>
        </div>
user_102730130
Related