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

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

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

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

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

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

Answer 2

您需要将checkFocus()函数替换为returntrue或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 聊天框向上滚动问题

AJAX Chat Box Scrolling Up Issue

css

php

ajax

jquery

chat