包含聊天内容的 div，关注最后一个条目

Question

我想要包含聊天内容的 div，类似于 facebook。如果文本内容变长，就会出现y轴滚动，但是：

1. 焦点应位于最新的聊天条目上
2. 一个很长的单词应该换行

js 菲德尔代码

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;