티스토리 뷰





반응형


<style>

#chatContent{

overflow: auto or scroll;

}

</style>


<div id="chatContent">

<div id="insertContent">


</div>

</div>



회색깔이 chatContent고 초록색이 insertContent이다. 보여지는 칸은 회색이지만 실질적으로 채팅의 내용이 쌓이면 초록색처럼 튀어 나가게 될것이다. 이 성질을 이용해서 스크롤을 맨 아래로 이동 시킬 것이다. 


채팅 내용이 다 담긴 div 높이에서 화면에 보여질 만큼의 부분을 뺀다. 

예를 들어 전체 채팅내용이 10인데 보여지는 화면이 2라면 10-2=8이 된다. 그래서 보여지는 화면에 scrollTop(8)만큼 이동하게 해서 맨 아래 2만 보이니 스크롤의 맨 아래로 이동이 되는 것이다. 


(코드)


var maxScroll = $("#insertContent").height() - $("#chatContent").height();

$("#chatContent").scrollTop(maxScroll);








반응형
댓글
반응형
최근에 달린 댓글
글 보관함
Total
Today
Yesterday
최근에 올라온 글
«   2024/05   »
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31