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 Demo

如何自动向下滚动聊天框（div）？

1 个答案: