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);








반응형