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

要回答您的问题：每隔一段时间间隔运行一次，当您在等待期间向上滚动时，它会再次运行并向下移动800像素。您可以从功能中删除它来执行此操作。

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

如果没有，那么你可以检查用户是否滚动，当用户滚动时，你不应该使用jQuery滚动。为此，您可以在此函数外添加一个变量，如果用户完全滚动，则会更新。

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

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

Answer 2

您需要替换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 );
    }
})

AJAX聊天框滚动问题

2 个答案: