front-end/JQuery
제이쿼리 스크롤 최신화, 원하는 위치로 옮기기
이안_ian
2019. 3. 10. 16:23
반응형
<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);
반응형