我似乎无法得到jQuery的新消息滚动到我的代码工作

Question

我环顾四周在其他答案，但我不明白我在做什么错了/我怎么可以将答案与我的问题 - 如果我有一个非常相似的答案，我没有用过，我提前道歉！

所以基本上我有一个基本的页面和一个按钮，您可以单击以调出侧面的消息栏。这个工作正常（我试图在代码笔上简化它），但当我输入新消息时，我无法滚动消息部分自动滚动到底部，而是必须向下滚动才能看到我的新消息。

我有这样的一部分：

function displayChatMessage(name, text) { 
    $('<li/>').text(text).prepend($('<span/>').text(name+':')).appendTo($('#messagesDiv')); 
    $('#messagesDiv')[0].scrollTop = $('#messagesDiv')[0].scrollHeight; 

} 

这是从火力教程。在他们的消息中，尽管消息被写入的部分仍然在页面之外移动。我已经试过绕过这个和我的div配置，但我最终似乎最终通常与我的所有文本框在屏幕之外。

任何想法非常赞赏。

以下是codepen链接我希望能工作，因为我无法在jsfiddle中找到合适的部件。

Answer 1

好的。问题是你试图设置错误元素的滚动高度。

试试这个 $('.messages').scrollTop($('.messages').prop('scrollHeight'));