[Javascript] div (overflow:scroll) 스크롤을 가장 아래로 내리기

* HTML5를 하면서 AJAX로 얻어온 데이터를 div 태그에 뿌려주다보면 넘쳐서 스크롤바가 생기는 경우가 많다. 가장 대표적인 예가 채팅 프로그램을 만들 때 가장 아래로 스크롤을 유지해야하는데, div에 내용이 추가되고 나서 아래의 자바스크립트를 사용하면 된다.

var objDiv = document.getElementById("mydiv");
objDiv.scrollTop = objDiv.scrollHeight;

: 위의 바닐라 자바스크립트 말고도 jQuery를 이용하는것도 방법이다.

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

: 위에서 scrollTop 안에 $("#mydiv")[0]을 하는 이유는 직접 dom에서 데이터를 가져오기 위함이다.

* 덤으로 div에 스크롤이 가능하게 하는 것은 CSS 스타일로도 가능하며 아래와 같이 하면 된다.

#mydiv {
    height:100px;
    overflow:scroll;
}

: 위와 같이 하면 div의 내용이 100픽셀을 넘어가면 스크롤바가 생길 것이다.

끝.