div 자동 스크롤

Question

나는 div에 채팅 상자가 있습니다. 새 메시지가 도착할 때마다 메시지가 상자에 추가됩니다. 상자를 맨 아래로 자동 스크롤하여 새 메시지를 표시하려고합니다. 이것을 어떻게 할 수 있습니까?

<div id="chatting" style="overflow: auto; background-color: #fff; border: solid 2px #dedede; width: 600px; height: 500px; padding: 10px;"> 
    hello<br/> 
    hello<br/> 
    hello<br/> 
    hello<br/> 
    hello<br/> 
    hello<br/> 
    hello<br/> 
    hello<br/> 
    hello<br/> 
    hello<br/> 
    hello<br/> 
    hello<br/> 
    hello<br/> 
    hello<br/> 
    hello<br/> 
    hello<br/> 
    hello<br/> 
    hello<br/> 
    hello<br/> 
    hello<br/> 
    hello<br/> 
</div> 

Answer 1

당신은 채팅 창 div의 scrollTop 속성을 설정하여이 작업을 수행 할 수 있습니다.

var chatWindow = $("#chating"); 
chatWindow.scrollTop(chatWindow[0].scrollHeight); 

당신은 때마다 채팅이 전화를 할 것입니다 : 또는

var chatWindow = document.getElementById('chating'); 
chatWindow.scrollTop = chatWindow.scrollHeight;​ 

http://jsfiddle.net/Ln8Hd/

사용하여 jQuery를 : 사업부의 하단으로 스크롤하려면 scrollTop 동일 scrollHeight로 설정 메시지가 div에 추가되었습니다.