像滚动行为一样聊天（ReactJs）

Question

我正在尝试实现聊天应用程序，更确切地说是聊天应用程序的滚动行为。我认为最好用gif描述。 https://i.imgur.com/NnpMeOx.gif 如您所见，我想支持一些关键功能：

1. 滚动相反，因此在页面加载时，消息会随滚动条一起从底部开始
2. 当用户输入消息时，聊天会滚动到底部。 （这很容易，不需要注意这一部分）
3. 如果出现新消息（在现实生活中由websocket推送），它不应该破坏现有的滚动位置，除非它已经在底部。然后它应该滚动以自动显示消息。

到目前为止，我已经实施了2个解决方案：

a）在可滚动元素上显示flex和flex-direction column-reverse。这可以从一个盒子中精美地工作，但仅限于chrome :( IE（和Edge）以及firefox完全忽略了这一点。不是一个好的解决方案

b）我用transform：scaleY（-1）翻转了容器，然后我翻转了消息并用相同的变换翻动了每一个消息。这里主要的明显问题是滚动（鼠标滚轮和箭头）是相反的。我有点修复它，没有管理平滑滚动（糟透了）但又一次，Edge（可能还有IE）只显示滚动条为禁用。不是一个好的解决方案

我真的希望找到一个可以指引我朝着正确方向前进的人，因为到目前为止，我的努力在逻辑上确实完全失败了浏览器兼容性。

代码在https://github.com/PeterKottas/react-bell-chat上，它反应但是tbh，这并不重要，因为这看起来更像是一般的网络开发练习。

P.S。：我不能使用jQuery，希望这是公平的。所以无论是css还是普通的javascript。就像我说的那样，这与反应

没什么关系

Answer 1

好吧，我没有收到任何回复，并设法自己解决，所以我会接受这个，以防将来帮助某人。

第三个也是最终解决方案： 我保持滚动的方向，并没有做任何反转。相反，我迷上了onScroll和wheel事件，创建了一些回调并设法完美地模仿了这种行为。您可以在returning a pointer to a local variable上的代码中找到更多详细信息。