AJAX聊天框向上滚动发行 [英] AJAX Chat Box Scrolling Up Issue

问题描述

您好我正在写一个聊天网站，我有一个包含信息的DIV的一个问题。在CSS包含信息的div有溢出：汽车; ，允许滚动条。现在的问题是，当Ajax是获取通过获取从数据库中消息的PHP脚本的消息，您不能向上滚动。阿贾克斯 refreshMessages（）功能设置更新每秒使用 window.setInterval（refreshMessages（），1000）; 。这就是我想要的，但是当我滚动看到previous消息，滚动条打直回落到聊天中，由于AJAX最终获取功能。

的问题是什么任何想法？

AJAX code：

  //抓取所有的邮件

VAR refreshMessages =功能（）{
 $阿贾克斯（{
   网址：包括/ messages.inc.php'，
   键入：GET，
   数据类型：HTML
 }）

 .done（功能（数据）{
    $（'＃消息'）的HTML（数据）。
    $（'＃信息）。停止（）。动画（{
       scrollTop的：$（＃邮件）[0] .scrollHeight
    }，800）;
 }）

 .fail（函数（）{
    $（'＃信息）prePEND（'错误检索新邮件..'）;
 }）;
}
 

编辑：

我用这个code，但它是不是很的工作，它会暂停功能，但是当滚动条可以追溯到底部的功能不重新启动。帮助？

  //检查如果最后的消息是在焦点

变种重启= 0;

VAR checkFocus =功能（）{
  VAR容器= $（'的消息。）;
  VAR HEIGHT = container.height（）;
  VAR scrollHeight属性=容器[0] .scrollHeight;
  变种ST = container.scrollTop（）;
  VAR总和= scrollHeight属性 - 高 -  32;
  如果（映异构体：=总和）{
     的console.log（'专注'）; //测试目的
     如果（重启= 0）{
        window.setTimeout（refreshMessages（），2000）;
        重新开始= 1;
     }
  } 其他 {
    window.clearInterval（refreshMessages（））;
    重新开始= 0;
  }
}
 

解决方案

您需要更换 checkFocus（）函数返回真或假，然后让AJAX检查如果需要的滚动条新信息或不加入后发下来。与此替换 checkFocus（）功能：

  //检查如果最后的消息是在焦点
VAR checkFocus =功能（）{
    VAR容器= $（'的消息。）;
    VAR HEIGHT = container.height（）;
    VAR scrollHeight属性=容器[0] .scrollHeight;
    变种ST = container.scrollTop（）;
    VAR总和= scrollHeight属性 - 高 -  32;
    如果（映异构体：=总和）{
        返回true;
    } 其他 {
        返回false;
    }
}
 

更改AJAX .done这样：

  .done（功能（数据）{
    如果（checkFocus（））{
        $（'＃消息'）的HTML（数据）。
        scrollDownChat（）;
    } 其他 {
       $（'＃消息'）的HTML（数据）。
    }
}）
 

Hi I am writing a chat website and I have a problem with the div containing the messages. In the CSS the div containing the messages has overflow: auto; to allow scroll bars. Now the problem is when ajax is fetching the messages through a PHP script that fetches the messages from the database, you cannot scroll up. The AJAX refreshMessages() function is set to update every second using window.setInterval(refreshMessages(), 1000);. This is what I want but when I scroll up to see previous messages, the scroll bar hits straight back down to the end of the chat due to the AJAX fetch function.

Any ideas of what the issue is?

AJAX Code:

//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..');
 });
}

EDIT:

I'm using this code but it isn't quite working, it pauses the function but then the function doesn't restart when the scroll bar goes back to the bottom. Help?

//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;
  }
}

解决方案

You need to replace the checkFocus() function to return true or false and then get AJAX to check if it need's to send the scroll bar down after adding in the new message or not. Replace the checkFocus() function with this:

//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;
    }
}

Change AJAX .done to this:

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

这篇关于AJAX聊天框向上滚动发行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！