javascript - 像滚动行为一样聊天(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 ，它是有反应的，但说实话，这并不重要，因为这看起来更像是一般的网络开发练习。

P.S.:我不会使用 jQuery，希望这是公平的。所以无论是 css 还是纯 javascript。就像我说过的，这与 react 没有太大关系

Answer 1

好吧，我没有收到任何回复并设法自己修复了它，所以我会接受它，以防它在未来对某人有所帮助。

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