在聊天过程中将文本与底部对齐？

Question

我正在构建一个自定义网络聊天应用程序，虽然我已经解决了基础知识，但我一直想知道这是否可能......现在，聊天出现在 div 的顶部，当它到达底部，div 开始滚动。这有效。这太棒了。但我想知道是否可以将其创建得更像 IRC 客户端，其中聊天最初出现在 div 的底部，然后每个新行出现在旧行的下方，等等，再次，当 div 已满时，它开始滚动。

我已经成功地完成了这项工作的一部分：我可以让它以这种方式显示。但我找不到滚动它的方法；要么滚动不出现（当内部文本 div 上没有溢出时，尽管外部容器 div 上有溢出），或者它仅限于文本的宽度而不是容器 div 的宽度。

我尝试过的一些选项：

<div id="chatbox" style="overflow: auto; position: relative; width: 100%; height: 400px;">
<div id="chatmessages" style="overflow: auto; position: absolute; bottom: 0;"></div></div>

这使文本正确显示在底部，但不会出现滚动条。

<div id="chatbox" style="overflow: auto; position: relative; width: 100%; height: 400px;">
<div id="chatmessages" style="overflow: scroll; position: absolute; bottom: 0;"></div></div>

这使得文本正确显示在底部，并且出现滚动条，但它的宽度仅与文本一样宽，即使宽度= 100％...并且当文本到达顶部时，滚动条保持灰色。

基本上，我是否想要内部或容器 div 上的滚动条，这是否可能，我如何强制它工作，我的做法是否完全错误？

Answer 1

滚动条不会启动，因为 chatmessages 只是不断变高。

使用这些样式：

    #chatbox
    {
        overflow:   none;
        position:   relative;
        width:      100%;
        height:     400px;
    }
    #chatmessages
    {
        overflow:   auto;
        position:   absolute;
        bottom:     0;
        max-height: 400px;
    }

Answer 2

使用此 jquery 滚动到底部，因此它将始终显示最新消息：

$('#chatmessages').scrollTop($('#chatmessages')[0].scrollHeight);

对于 #chatmessages 使用宽度：100% 和最大高度与 #chatbox 的高度相同

#chatbox {
    overflow:   none;
    position:   relative;
    width:      100%;
    height:     200px;
    border:     1px solid #ccc;
}
#chatmessages
{
    overflow:   auto;
    position:   absolute;
    bottom:     0;
    width:      100%;
    max-height: 200px;
}

我用示例文本消息创建了这些小提琴：

jsfiddle 带滚动

jsfiddle 不带滚动

Answer 3

我想出了一个不需要 JavaScript 的解决方案，这意味着它运行得更快。当将聊天滚动到底部时，需要注意很多变量，例如正在加载和改变滚动高度的图像。

在我提出的解决方案中，聊天在可滚动包装器中旋转 180 度。在包装器内部，您有另一个旋转 180 度的 div。这样，当新消息出现时，内部 div 自然浮动到底部。

<div id="chat_wrap" class="scrollable" style="transform-origin: 50% 50%; transform: rotate(180deg);" onscroll="reverseScroll()">
   <div id="messages_wrap" style="float: left;width: 100%; transform: rotate(180deg);">
      <div class="message">Your message</div>
   </div>
</div>

旁注，我的“chat_wrap”div 具有绝对位置，顶部/底部/左/右设置为适合它应该在的位置。