像滚动行为一样聊天 (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）只是将滚动条显示为禁用。这不是一个好的解决方案

I am really hoping to find somebody who can point me in the right direction because so far, my efforts while logically ok totally failed browser compatibility.

The code is on https://github.com/PeterKottas/react-bell-chat, it's react but tbh, that doesn't matter much as this seems more like a general web dev exercise.

P.S.: I can't use jQuery, hope that's fair. So either css or plain javascript. Like I've said, this doesn't have much to do with react

Answer 1

好吧，我没有得到回复，并设法自己解决了这个问题，所以我会接受这个，以防它将来对某人有帮助。

第三个也是最后一个解决方案：我保持滚动方向并且根本不做任何反转。相反，我连接了 onScroll 和 Wheel 事件，创建了一些回调并成功地完美模仿了该行为。您可以在https://github.com/PeterKottas/react-bell-chat上的代码中找到更多详细信息。