高度なスクロール機能を使用したAJAXチャットの作成。どうやって？

Question

これを達成するための使用例が必要です。私はいくつかのHTMLを持っている：

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

は、その後、私はいくつかの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); 
}); 

これは当然のサーバー側のコードを除く基本的なチャット機能、のほんの一例です。私が必要とするのは、擬似コードが何を記述しているかを達成するための使用例です。ユーザーがDIVの一番下にスクロールされているかどうかを検出するにはどうしたらいいですか？チャットの履歴を見るためにスクロールしている場合、DIVの一番下にジャンプしたくない。

JQueryのScrollToプラグインについて聞いたことがありますが、いくつかの例が必要です。

ありがとうございます！

EDIT：ここに興味のある方のためのソリューションです。

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

この例の動作例については、http://www.jsfiddle.net/f4YFL/4/を参照してください。

Answer 1

あなたがこれまであなたの擬似コードをリファクタリングすることができますように思える：chatDisplay へ

追記応答であれば（下部のchatDisplay）

を{一番下までスクロール}ここで決定する方法のリンクがありますあなたが一番下までスクロールしている場合：

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

希望それが役立ちます。

ボブ