AJAX 聊天框向上滚动问题答案

【问题标题】：AJAX Chat Box Scrolling Up IssueAJAX 聊天框向上滚动问题
【发布时间】：2015-07-19 18:05:27
【问题描述】：

您好，我正在编写一个聊天网站，但包含消息的 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;
  }
}

【问题讨论】：

您是否在动画前使用.stop() 取消任何先前的动画？

标签： php jquery css ajax chat

【解决方案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 );
    }
})

【讨论】：

为什么在var sum = 声明中出现-32？那是滚动条高度箭头按钮还是类似的？
这是滚动条箭头按钮。
你能解释一下 checkFocus() 是做什么的吗？？

【解决方案2】：

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

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

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

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

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

【讨论】：