3

我正在尝试实现一个聊天应用程序，更准确地说是聊天应用程序的滚动行为。我认为最好用 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上，它是响应式的，但 tbh，这并不重要，因为这看起来更像是一个一般的网络开发练习。

PS：我不能使用 jQuery，希望这是公平的。所以无论是css还是纯javascript。就像我说的，这与反应没有太大关系

4

1 回答 1

4

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

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

于 2018-05-04T15:37:04.390 回答