如何自动向下滚动聊天框(div)?

时间:2015-09-02 14:26:50

标签: javascript jquery css

我一直在处理聊天应用程序,现在我需要在出现消息时自动滚动。 我尝试了不同的东西,但不幸的是它们不起作用。 所以这是我的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是如何工作的。我之前尝试了很多事情,但它也没有用。

你有什么建议吗?有什么建议? 您还需要更多信息吗?随意问一下!

1 个答案:

答案 0 :(得分:2)

为每封邮件提供一个ID,如下所示:

<div id="msg-1234">

然后你可以使用这个jQuery滚动到这个元素:

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

或者,在聊天的底部放置一个div:

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

然后滚动到此ID。

JSFiddle Demo