如何实现 React Inverted Infinite Scroll (Scroll up) *CodeSandBox 包括答案

【问题标题】：How to implement React Inverted Infinite Scroll (Scroll up) *CodeSandBox included如何实现 React Inverted Infinite Scroll (Scroll up) *CodeSandBox 包括
【发布时间】：2022-01-16 17:03:13
【问题描述】：

我正在尝试创建一个将消息加载到列表顶部的数组示例，同时保持其位置。这听起来很容易，但我公司没有人解决它。

这是我们所见的代码框。 *尽量不要使用笨重的包来完成此操作。

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

让我知道你是否已经解决了这个问题，我的叉子已经解决了。

非常感谢您的帮助。

【问题讨论】：

标签： reactjs react-native ecmascript-6 web-applications react-hooks

【解决方案1】：

使用 flexbox 反转列

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

【讨论】：

【解决方案2】：

只需在您的样式中添加以下代码：

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

我取消了您 useLayoutEffect

中的代码的注释

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

【讨论】：