Align text with bottom when it comes in during chat?

Question

I am creating a custom web chat application, and although I have the basics, I wondered if this is possible ... right now, the chat enters the top of the div, and when it reaches the bottom, the div starts scrolling. It works. Fine. But I was wondering if it is possible to create it more like an IRC client, where the chat comes initially at the bottom of the div, then each new line comes out below the old ones, etc., And again, when the div is full, it starts scrolling.

I managed to get some of this work: I can show how it looks. But I cannot find a way to scroll it; either the scroll does not appear (when there is no overflow on the inner, text div, despite the presence of overflow on the outer, div of the container) or is limited by the width of the text, not the width of the div container.

Some options I tried:

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

In this case, the text is displayed correctly at the bottom, but no scrollbar ever appears.

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

In this case, the text will appear correctly below and the scroll bar will appear, but it will only be wider than the text, even if the width = 100% ... and when the text reaches the top, the scrollbar will remain gray.

Basically, I want the scrollbar on an inner or container div, it’s even possible, how can I get it to work, and am I really wrong about that?

Answer 1

, chatmessages .

:

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

Answer 2

, javascript, , . , , , .

180 . div, 180 . , 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>

, div "chat_wrap" , /// , , .

Answer 3

Use this jquery to scroll down so that it always displays the last message:

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

For #chatmessages use width: 100% and maximum height same as #chatbox height

#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;
}

I created these scripts with sample text messages:

jsfiddle with scroll

jsfiddle without scrolling