Erstellen eines AJAX-Chats mit erweiterten Bildlauffunktionen. Wie?

Question

Ich brauche einige Anwendungsbeispiele, um dies zu erreichen. Ich habe einige HTML:

<div id="chatDisplay"> 
</div> 
<input type="text" id="message" /><input type="button" id="send" value="Send" /> 

Dann habe ich einige JQuery:

// This function sets up the ajax that posts chat messages to the server. 
$(function() 
{ 
    $('#send').click(function() 
    { 
      $.ajax(
      { 
       url: "chat/postmsg",, 
       data: { msg: $('#message').val(); }, 
       type: "POST", 
       success: function (response) 
       { 
        // Server sends back formated html to append to chatDisplay. 
        $('#chatDisplay').append(response); 
        //scroll to bottom of chatDisplay 
       } 
      }); 
    }); 
}); 

// This function periodically checks the server for updates to the chat. 
$(function() 
{ 
    setInterval(function() 
    { 
      $.ajax(
      { 
       url: "chat/getupdates", 
       type: "POST", 
       success: function (response) 
       { 
         // Server sends back any new updates since last check. 
         // Perform scroll and data display functions. Pseudo-code to follow: 

         // If (chatDisplay is scrolled to bottom) 
         // { 
         //  append response to chatDisplay 
         //  scroll to bottom of chatDisplay 
         // } 
         // else if (chatDisplay is scrolled up from bottom by any amount) 
         // { 
         //  append response to chatDisplay, but do not scroll to bottom. 
         // } 
       } 
      }); 
    }, 7000); 
}); 

Dies ist nur ein Beispiel für grundlegende Chat-Funktionen, ohne serverseitigen Code natürlich. Was ich brauche, ist ein Beispiel, wie der Pseudo-Code beschrieben wird. Wie erkenne ich, ob der Benutzer zum Ende des DIV gescrollt wurde und wie scrolle ich nach unten? Ich möchte nicht, dass sie auf den Grund des DIV gesprungen werden, wenn sie scrollen, um sich die Chat-Geschichte anzusehen.

Ich habe von ScrollTo-Plugin von JQuery gehört, aber brauche nur ein paar Beispiele.

Vielen Dank im Voraus!

EDIT: Hier ist die Lösung für Interessenten.

success: function (response) 
{ 
    var elem = $('#chatDisplay'); 
    var atBottom = (elem[0].scrollHeight - elem.scrollTop() == elem.outerHeight()); 
    $('#chatDisplay').append(response); 
    if (atBottom) 
      $('#chatDisplay').scrollTop($('#chatDisplay')[0].scrollHeight); 
} 

Zum http://www.jsfiddle.net/f4YFL/4/ für ein Beispiel dafür in Aktion.

Answer 1

Scheint, wie Sie Ihren Pseudo-Code zu diesem Refactoring können:

append Antwort auf chatDisplay if (chatDisplay an der Unterseite) {nach unten scrollen}

Hier ist ein Link, wie um zu bestimmen, wenn Sie nach unten gescrollt werden:

http://yelotofu.com/2008/10/jquery-how-to-tell-if-youre-scroll-to-bottom/

Hoffe, das hilft.

Bob