javascript - 包含聊天的 div，关注最后一个条目

Question

我想要包含聊天的 div，类似于 facebook。如果文本内容变长，则有 y-scroll，但是：

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")-- 这可能会滚动所有您不想要的聊天。

你也可以使用 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

至于线刹车——它应该是自动的。