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

: 2012. 12. 05

: 출처 - http://unikys.tistory.com/285

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

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

objDiv.scrollTop = objDiv.scrollHeight;

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

$("#mydiv").scrollTop($("#mydiv")[0].scrollHeight);<p></p><p><br></p>

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

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

#mydiv {

    height:100px;

    overflow:scroll;

}

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