div包含聊天，專注於最後一個條目

Question

我希望包含聊天的div，類似於facebook。 如果文本內容變得更長，療法爲y-滾動，但：

1. 主要對象應是上最新的聊天入口
2. 一個很長的單詞應該做一個換行符

js fiddel code

CSS

.chat{ 
width: 230px; 
    height: 310px; 

margin-left: 10px; 
background-color: grey; 
    border: solid 1px black; 

overflow-y:scroll; 
} 

Answer 1

當有新消息進來時，您必須滾動到底部，並且您必須使用JavaScript才能做到這一點（儘管如此，可能會有一種聰明的CSS方式）。

如果你使用jQuery（和我建議你這樣做），你可以做這樣的事情：

// when a new message comes in... 
var $chat = $(".chat"); 
$chat.scrollTop($chat.height()); 

您可能想要選擇從$(".chat")改變 - 這可能會滾動全部聊天，你不會想要的。

您還可以使用JavaScript的香草做：

// when a new message comes in... 
var chatEl = document.getElementById("#mychatelement"); 
chatEl.scrollTop = chatEl.scrollHeight; 

Answer 2

對於scrollin g部分是指jQuery Scroll to bottom of page/iframe

至於線路制動器 - 它應該是這樣的自動。