我似乎無法讓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'));