How to implement React Inverted Infinite Scroll (Scroll up) *CodeSandBox included-CodePudding

Im trying to create and example of an array loading messages to the top of the list while maintaining it's position. It sounds easy to do but no one at my company has solved it.

Here is a codesandbox which is as far as we've seen. *Trying not to use a bulky package to accomplish this.

https://codesandbox.io/s/react-stay-scrolled-demo-forked-x6zyc

Let me know if you have solved it by dropped your fork of mine with it solved.

Thanks a lot for your help.

CodePudding user response：

use flexbox to reverse the column

const style = {
  display: "flex",
  flexDirection: 'column-reverse',
  width: "100px",
  height: "250px",
  overflow: "auto",
  border: "1px solid #000"
};

CodePudding user response：

Just add the following code in your style:

const style = {
  ...,
  display: "flex",
  flexDirection: 'column-reverse'
};

And I uncommented the code in your useLayoutEffect

 useLayoutEffect(() => {
    bottomRef.current.scrollIntoView({ behavior: "smooth" });
  }, [messages]);