如何自動向下滾動聊天框 (div)？

Question

我一直在開發一個聊天應用程序，現在我需要在出現消息時自動滾動。 我嘗試了不同的東西，但不幸的是它們不起作用。 所以這是我的 main.js 代碼：

var lastTimeID = 0;

$(document).ready(function() {
  $('#btnSend').click( function() {

    sendChatText();
    $('#chatInput').val("");
  });
  startChat();
});

function startChat(){
  setInterval( function() { getChatText(); }, 2000);

}

function getChatText() {
  $.ajax({
    type: "GET",
    url: "/refresh.php?lastTimeID=" + lastTimeID
  }).done( function( data )
  {
    var jsonData = JSON.parse(data);
    var jsonLength = jsonData.results.length;
    var html = "";
    var message = $('#view_ajax');
    for (var i = 0; i < jsonLength; i++) {
      var result = jsonData.results[i];
      html += '<div>(' + result.chattime + ') <b>' + result.usrname +'</b>: ' + result.chattext + '</div>';
      lastTimeID = result.id;

    }
    $('#view_ajax').append(html);
    message.html(data);
      message.scrollTop(message[0].scrollHeight);

  });
}

function sendChatText(){
  var chatInput = $('#chatInput').val();
  if(chatInput != ""){
    $.ajax({
      type: "GET",
      url: "/submit.php?chattext=" + encodeURIComponent( chatInput )
    });
  }
}

我用過

var message = $('#view_ajax');
message.html(data);
message.scrollTop(message[0].scrollHeight);

我真的不知道 jQuery 是如何工作的。 在此之前我已經嘗試了幾件事，但它也不起作用。

你有什么建議嗎？ 有什么建議嗎？ 你需要更多信息嗎？ 隨意問！

Answer 1

為每條消息指定一個 ID，如下所示：

<div id="msg-1234">

然后你可以使用這個 jQuery 滾動到這個元素：

$('html, body').animate({ scrollTop: $('#msg-1234').offset().top }, 'slow');

或者，在聊天底部放置一個 div：

<div id="chat-end"></div>

並滾動到此 ID。

JSFiddle 演示