Javascript 类似聊天的滚动行为（ReactJs）

我正在尝试实现一个聊天应用程序，更确切地说是一个聊天应用程序的滚动行为。我认为最好用gif来描述它。 如您所见，我希望支持几个关键功能：

滚动是反向的，因此在页面加载时，消息从底部开始，同时滚动条

当用户输入消息时，Chat会滚动到底部。（这很简单，不需要注意这一部分）

如果出现新消息（在现实生活中由websocket推送），它不应该破坏现有的滚动位置，除非它已经在底部。然后它应该滚动以自动显示消息

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

a） 在可滚动元素上显示flex和flex direction列反转。这是一个很好的解决方案，但只适用于chrome（IE和Edge）以及firefox，完全忽略了这一点。这不是一个好的解决方案

b） 我使用transform:scaleY（-1）翻转容器，然后反转消息，并使用相同的转换翻转每个消息。这里最明显的问题是滚动条（鼠标滚轮和箭头）被反转了。我有点修复了它，没有管理平滑滚动（糟糕），但再一次，Edge（可能还有IE）只是将滚动条显示为禁用状态。这不是个好办法

我真的希望能找到一个能为我指明正确方向的人，因为到目前为止，我的努力虽然在逻辑上还行，但完全没有实现浏览器兼容性

代码是打开的，它是react，但是tbh，这并不重要，因为这看起来更像是一个一般的web开发练习

---

附言：我不能使用jQuery，希望这是公平的。所以要么是css，要么是纯javascript。正如我所说，这与react没有多大关系。我没有收到回复，我自己设法解决了它，所以我会接受它，以防将来对某人有所帮助

第三个也是最终解决方案：

---

我保持滚动的方向，根本没有做任何反转。相反，我连接到onScroll和wheel事件中，创建了一些回调，并成功地模拟了行为。您可以在上的代码中找到更多详细信息。

请注意，该库上的演示未更新为最新版本的代码。如果它对任何人都有帮助的话，我可能会这样做，但它只是一个自动取款机，所以我不想麻烦它。关于“a”项，你知道为什么这个解决方案只在Chrome中有效吗？如果不是，考虑浏览器之间有很多Frasbox渲染差异。也许它在FF、IE和Edge中不起作用的原因是有一个简单的解决方案，现在放弃这个解决方案可能为时过早，而且可能是不必要的。考虑在这个问题上发布一个完整的问题（A）。NAH，这是一个bug /未实现的/特性，只是在其他浏览器中有不同的效果。这是一个遗憾，因为这个解决方案本来是完美的。无论如何，我按照我的答案实现了所需的行为。感谢您抽出时间查看此文档；）顺便说一句，该链接现在已更新，以便您可以查看最终版本。