Jquery聊天框 - 顯示DIV底部的第一條消息向上移動

Question

我有一個發送和接收消息的聊天DIV。

目前消息在DIV的頂部開始，然後向下DIV（以紅色顯示），並且當它們見底它們與Jquery的向上推動象下面這樣：

.scrollTop(activeConversationsDIV[0].scrollHeight); 

我想問問是否有方法在DIV底部啓動消息？這對用戶來說會更有意義，因爲他們會看到他們正在輸入的內容接近他們鍵入的位置。

有沒有一種方法可以啓動從底部向上工作的消息流？

三江源

Answer 1

您可以使用display: table，display: table-cell和vertical-align: bottom。

下面是一個例子：

http://jsfiddle.net/ktpRK/

CSS

#chat { 
    display: table; 
    height: 200px; 
    width: 200px; 
    border: 1px solid #000; 
} 

.chatMessage { 
    display: table-cell; 
    vertical-align: bottom; 
} 

HTML

<div id="chat"> 
<div class="chatMessage"> 
    <p>test</p> 
    <p>test 2</p> 
</div> 
</div> 

Answer 2

這裏是具有定位的示例

HTML

<div id="chatbox"> 
    <div id="chatmessages"> 
     <div>Hi </div> 
     <div>Hello </div> 
     <div>How are you ?</div> 
     <div>I am fine, Thanks ! </div> 
     <div>And how about you? </div> 
    </div> 
</div> 

CSS

#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; 
} 
#chatmessages div { 
    border:1px solid #e2e4e3; 
    border-radius: 5px; 
    margin:5px; 
    padding:10px; 
} 

JQuery的

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

jsfiddle with scroll

jsfiddle without scroll