Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

isReverse broken with combination of column-reverse #305

Open
MariuzM opened this issue Jan 18, 2023 · 4 comments
Open

isReverse broken with combination of column-reverse #305

MariuzM opened this issue Jan 18, 2023 · 4 comments

Comments

@MariuzM
Copy link

MariuzM commented Jan 18, 2023

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>
  );
};
@MariuzM MariuzM changed the title Good example for chat window scroll? I think isReverse broken with combination of column-reverse Jan 18, 2023
@MariuzM MariuzM changed the title I think isReverse broken with combination of column-reverse isReverse broken with combination of column-reverse Jan 18, 2023
@rafatrace
Copy link

Did you manage to find a fix for this?

@mweel1
Copy link

mweel1 commented Jul 11, 2023

+1

1 similar comment
@jaffyyyy
Copy link

+1

@SukhorukovS
Copy link

Try to add initialLoad prop as false

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants