【发布时间】：2018-10-13 19:30:39
【问题描述】：
我正在尝试实现一个聊天应用程序，更准确地说是聊天应用程序的滚动行为。我认为最好用 gif 来描述。 https://i.imgur.com/NnpMeOx.gif 如您所见，我想支持几个关键功能：
- 滚动是反向的，因此在页面加载时，消息从底部开始与滚动条一起
- 当用户输入消息时，聊天会滚动到底部。 （这个很简单，这部分不用关注）
- 如果出现新消息（在现实生活中由 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。就像我说的，这与 react 没有太大关系
【问题讨论】：
-
请注意，该库上的演示未更新到最新版本的代码。如果它可以帮助任何人，我可能会这样做，但它只是一个 fork atm，所以我没有打扰它。
-
关于“a)”项，你知道为什么这个解决方案只适用于 Chrome 吗？如果不是，请考虑浏览器之间存在许多 flexbox 渲染差异。也许它在 FF、IE 和 Edge 中不起作用的原因是易于修复，目前放弃该解决方案可能为时过早，而且可能没有必要。考虑发布关于此问题的完整问题（MCVE）。
-
不，这是一个错误/未实现/功能，在其他浏览器中的工作方式不同。遗憾的是，因为该解决方案本来是完美的。无论如何，我设法按照我的回答实现了所需的行为。感谢您抽出宝贵时间查看此内容；）
-
顺便说一句，链接现已更新，您可以查看最终版本。
标签： javascript css reactjs flexbox chat