AJAX聊天框滚动问题

Question

嗨，我正在写一个聊天网站，我对包含信息的div有一个问题。在CSS中，包含消息的div具有允许滚动条的overflow: auto;。现在的问题是，当ajax通过从数据库获取消息的PHP脚本获取消息时，您不能向上滚动。AJAX refreshMessages()函数设置为每秒钟使用window.setInterval(refreshMessages(), 1000);更新一次。这是我想要的，但是当我向上滚动以查看以前的消息时，滚动条会直接返回到聊天的末尾，这是因为AJAX获取函数。

对这个问题有什么想法吗？

AJAX代码：

//Fetch All Messages

var refreshMessages = function() {
 $.ajax({
   url: 'includes/messages.inc.php',
   type: 'GET',
   dataType: 'html'
 })

 .done(function( data ) {
    $('#messages').html( data );
    $('#messages').stop().animate({
       scrollTop: $("#messages")[0].scrollHeight
    }, 800);
 })

 .fail(function() {
    $('#messages').prepend('Error retrieving new messages..');
 });
}

编辑：

我正在使用这段代码，但它不太好用，它暂停了函数，但是当滚动条返回底部时，函数不会重新启动。帮助?

//Check If Last Message Is In Focus

var restarted = 0;

var checkFocus = function() {
  var container = $('.messages');
  var height = container.height();
  var scrollHeight = container[0].scrollHeight;
  var st = container.scrollTop();
  var sum = scrollHeight - height - 32;
  if(st >= sum) {
     console.log('focused'); //Testing Purposes
     if(restarted = 0) {
        window.setTimeout(refreshMessages(), 2000);
        restarted = 1;
     }
  } else {
    window.clearInterval(refreshMessages());
    restarted = 0;
  }
}

Answer 1

您需要替换checkFocus()函数以返回true或false，然后让AJAX检查它是否需要在添加新消息之后发送滚动条。将checkFocus()函数替换为：

//Check If Last Message Is In Focus
var checkFocus = function() {
    var container = $('.messages');
    var height = container.height();
    var scrollHeight = container[0].scrollHeight;
    var st = container.scrollTop();
    var sum = scrollHeight - height - 32;
    if(st >= sum) {
        return true;
    } else {
        return false;
    }
}

将AJAX .done更改为：

.done(function( data ) {
    if(checkFocus()) {
        $('#messages').html( data );
        scrollDownChat();
    } else {
       $('#messages').html( data );
    }
})

Answer 2

要回答你关于正在发生什么的问题:间隔每秒钟运行一次，当你在等待期间向上滚动时，它会再次运行，并将你移动800像素。您可以将其从函数中删除以完成此操作。

由于您使用的是overflow: auto，您的聊天框将在必要时增长并创建一个滚动条。您试过删除滚动功能吗？它不是移动到底部的最新文本吗？

如果没有，则可以检查用户是否滚动过，当用户滚动时，不应该使用jQuery滚动。为此，您可以在此函数之外添加一个变量，如果用户滚动，该变量将被更新。

在用户滚动和javascript滚动之间进行检测并不容易，因此可以使用正在查看的消息。如果焦点中的消息是最后一条消息，则应该一直滚动到底部，但当最后一条消息脱离视图时，您可以假设用户已经滚动。

有关检测滚动：Detect whether scroll event was created by user的更多信息，请参见此问题