고급 스크롤 기능으로 AJAX 채팅 작성. 방법?

Question

이 작업을 수행하는 방법에 대한 몇 가지 사용 예제가 필요합니다.

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

이 물론 서버 측 코드를 제외한 기본적인 채팅 기능, 단지 예입니다 좀 HTML이있다. 필요한 것은 의사 코드가 설명하는 것을 수행하는 방법에 대한 사용 예제입니다. 사용자가 DIV 맨 아래로 스크롤되었는지 어떻게 감지합니까? 맨 아래로 스크롤하려면 어떻게합니까? 채팅 내역을보기 위해 스크롤을 올리면 DIV의 맨 아래로 뛰어 오르는 것을 원하지 않습니다.

JQuery의 ScrollTo 플러그인에 대해 들어 봤지만 예제가 필요합니다.

미리 감사드립니다.

편집 : 여기에 관심있는 사람들을위한 해결책이 있습니다. 행동이의 예를 들어 http://www.jsfiddle.net/f4YFL/4/에

는

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

이동합니다.

Answer 1

당신이 당신의 의사 코드를 리팩토링 할 것 같다 :

chatDisplay 에 추가 할 경우의 응답 (하단에 chatDisplay) 여기

를 결정하는 방법에 대한 링크입니다 {하단으로 스크롤} 당신이 아래로 스크롤하는 경우 :

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

희망이 도움이됩니다.

밥