2012-02-05 2 views
0

여러 자습서에서이 AJAX 코드를 선택했지만 문제는 ajax가 호출 될 때 div가 항상 맨 아래로 스크롤된다는 것입니다. div에 새 메시지가있는 경우 div 만 스크롤하도록 설정합니다.JQuery 채팅 응용 프로그램이 새 메시지에서만 div의 맨 아래로 스크롤됩니까?

$.ajax({ 
    url: "msg-handle/get-messages.php", 
    cache: false, 
    data: { room: $("#room").val() }, 
    success: function(data) { $('#chat').html(data) 

$("#chat").scrollTop($("#chat")[0].scrollHeight); 

    }, 
}); 

}, 500); 

없이 내 코드에 대한 큰 파급 효과를이 을 달성 할 수있는 방법이 있습니까?

답변

0

가장 쉬운 방법은 div에 새 메시지가있을 때 PHP 스크립트가 플래그를 전달하도록하는 것입니다. 그런 다음 스크롤하기위한 점검 조건을 입력해야합니다.

또 다른 옵션은 새 .get() 결과의 div 수를 이전 크기와 비교하고 현재 div에 더 많은 div가있는 경우에만 스크롤하는 것입니다.

+0

흠. 흥미 롭 군. 나는 그것을 시도 할 것이다. –

+0

그냥 큰 소리로 생각하고 ... 왜 새 메시지에 고유 한 ID를 부여하지 않습니까? 모든 메시지에 일련 번호가있는 고유 ID를 첨부 하시겠습니까? 그렇게하면 이전 메시지를 제거 할 때 (성능 문제를 피하기 위해 브라우저에서 동시에 8,000 개의 메시지를 표시하지 않아도 됨) 문제가 발생하지 않습니다. – maddrag0n

+0

글쎄, 얼마나 많은 로그에 표시되는지는 제한되지만 그래, 나는 그것을 생각하고 있었다. –

1

나는 그것을 시도하지 않았지만, 나는 내가 당신의 첫 번째로드 후 $("#chat").scrollTop($("#chat")[0].scrollHeight);을 넣어 생각 (다른 솔루션들)이 같은 ...

var oldscrollHeight = $("#chat")[0].scrollHeight; 
         //Takes the height BEFORE reload the div 

$.ajax({ 
    url: "msg-handle/get-messages.php", 
    cache: false, 
    data: { room: $("#room").val() }, 
    success: function(data) { $('#chat').html(data) 

    var newscrollHeight = $("#chat")[0].scrollHeight; 
          //Takes the height AFTER reload the div 

    if(newscrollHeight > oldscrollHeight){ //COMPARES 
     $("#chat").scrollTop($("#chat")[0].scrollHeight); //Scrolls 
    } 
}, 
}); 

수 있다고 생각 채팅 .. 그냥 조언.

관련 문제