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

Question

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

1. 滚动是反向的，因此在页面加载时，消息与滚动条一起从底部开始。
2. 当用户输入消息时，聊天被滚动到底部。(这很容易，不需要特别注意)
3. 如果出现新消息(通过websocket在现实生活中推送)，除非已经在底部，否则不应破坏现有的滚动位置。然后它应该自动滚动以显示消息。

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

a) 在可滚动元素上使用显示flex和flex-direction column-reverse。这在chrome上非常好用，但在IE (和Edge)以及firefox上完全忽略。不是一个好的解决方案。

b) 我使用 transform: scaleY(-1) 翻转了容器，然后翻转了每一个消息，同样使用了相同的 transform。主要的明显问题是滚动（鼠标滚轮和箭头）是反向的。我有点修复了它，但是无法实现平滑滚动（很糟糕），而且 Edge（以及可能是 IE）只显示禁用的滚动条。这不是一个好的解决方案。

我真的希望能找到能指导我正确方向的人，因为到目前为止，我的努力虽然在逻辑上还可以，但完全失败于浏览器兼容性。

代码在 https://github.com/PeterKottas/react-bell-chat，它是 react 的，但说实话，这似乎更像是一个通用的 web 开发练习。

P.S.：我不能使用 jQuery，希望这是公平的。所以要么使用 css 要么使用纯 javascript。就像我之前说的，这与 react 没有太大关系。

- Peter Kottas

---

请注意，该库的演示未更新到最新的代码版本。如果有帮助的话，我可能会更新它，但目前它只是一个分支，所以我没有费心去做。 - Peter Kottas

关于项目“a)”，你知道为什么这个解决方案只在Chrome中有效吗？如果不知道的话，请考虑到浏览器之间存在许多flexbox渲染差异。也许它在FF、IE和Edge中无法工作的原因是一个容易修复的问题，此时放弃这个解决方案可能过早，也可能是不必要的。请考虑发布一个完整的问题（包括一个MCVE）来讨论这个问题。 - Michael Benjamin

不好意思，这是一个在其他浏览器中工作方式不同的错误/未实现/特性。很遗憾，因为那个解决方案本来是完美的。无论如何，我按照我的答案成功地实现了所需的行为。感谢您抽出时间查看这个问题 ;) - Peter Kottas

顺便提一下，链接现在已更新，您可以查看最终版本。 - Peter Kottas

Answer 1

我没有得到任何回复，自己解决了问题，所以我会接受这个答案，以防将来有人需要。

第三个也是最终的解决方案： 我保持了滚动的方向，没有进行反转。相反，我挂钩了onScroll和wheel事件，创建了一些回调函数，并成功地模仿了这种行为。您可以在https://github.com/PeterKottas/react-bell-chat上找到更多详细信息。

- Peter Kottas