在聊天期间将文本与底部对齐？

Question

我正在构建一个自定义网络聊天应用程序，虽然我已经完成了基础知识，但我一直想知道这是否可能......现在，聊天出现在 div 的顶部，以及何时它到达底部，div 开始滚动。这行得通。这很棒。但我想知道是否有可能创建更像一个 IRC 客户端，聊天最初出现在 div 的 bottom 中，然后每条新行都出现在旧行的下方，等等，同样，当 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>

这使文本正确显示在底部，并出现了一个滚动条，但它的宽度仅与文本一样宽，即使 width=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 使用 width: 100% 和 max-height 与 #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 with scroll

jsfiddle without scroll

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 具有绝对位置，顶部/底部/左侧/右侧设置为适合它应该在的位置。