包含聊天的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")更改选择器 - 这可能会滚动所有聊天，这是您不想要的。

您也可以使用vanilla JavaScript：

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

Answer 2

有关滚动部分，请参阅jQuery Scroll to bottom of page/iframe

至于直线制动器 - 它应该是这样的。