我似乎无法让jQuery新消息滚动在我的代码中工作

Question

我到处都在寻找其他答案，但是我看不到自己在做错什么/如何将答案与我的问题联系起来-如果有一个非常相似的答案我没有用过，我会提前道歉！

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

我有这部分：

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

}

这是从firebase教程。 在他们的消息中，尽管消息的编写部分不断向下移动。 我已经尝试使用div配置来解决这个问题，但是最终我似乎将所有文本框都从屏幕上移开了。

任何想法表示赞赏。

下面是一个Codepen链接，我希望它能正常工作，因为我无法在jsfiddle中获得合适的部件。

Answer 1

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

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