isReverse broken with combination of column-reverse

[MariuzM]

Anyone have a good working example for chat window, that when opened start at bottom but does not start the loadMore function. Also data need to be reversed and displayed.

I've used this react-infinite-scroll-component before and with that it worked but had other issues so moved to this one.

import InfiniteScroll from 'react-infinite-scroller';

const items = ['Latest', '10', '9', '8', '7', '6', '5', '4', '3', '2', '1', 'Oldest'];

export const Scroll = () => {
  return (
    <div
      style={{
        display: 'flex',
        flexDirection: 'column',
        height: 400,
        overflow: 'auto',
      }}
    >
      <InfiniteScroll
        pageStart={0}
        loadMore={() => console.log('load more')}
        hasMore={true}
        loader={
          <div className="loader" key={0}>
            Loading ...
          </div>
        }
        useWindow={false}
        isReverse
      >
        <div
          style={{
            display: 'flex',
            flexDirection: 'column-reverse',
          }}
        >
          {items.map((item) => (
            <div
              key={item}
              style={{
                height: 100,
                backgroundColor: '#ab7c7c',
                color: '#000000',
                fontSize: 20,
              }}
            >
              {item}
            </div>
          ))}
        </div>
      </InfiniteScroll>
    </div>
  );
};

[rafatrace]

Did you manage to find a fix for this?

[mweel1]

+1

[jaffyyyy]

+1

[SukhorukovS]

Try to add initialLoad prop as false