티스토리 뷰
반응형
<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);
반응형
'front-end > JQuery' 카테고리의 다른 글
제이쿼리 붙여넣기 이벤트 감지하기 (0) | 2022.03.22 |
---|---|
모달창으로 데이터 넘기기 (1) | 2019.03.16 |
jQuery 엔터(Enter) 쳤을 때 함수 실행시키기 (1) | 2019.03.09 |
AJAX 사용하기!! (0) | 2019.01.14 |
자바스크립트에서 정규표현식 사용하기 (0) | 2019.01.11 |
댓글