스크롤 바 하단으로 위치하기(제이쿼리)

# 스크롤 바 하단으로 위치하기(제이쿼리)

• 채팅 기능 작업 시 overflow: scroll; 로 스크롤이 추가되도록 진행
• 문제점은 채팅이 추가될 경우 스크롤이 생성은 되지만, 스크롤이 상단에 고정.
• 구글링을 통해 제이쿼리를 이용한 스크롤 하단 고정 방법 확인.

$('#입력한 id값').scrollTop($('#입력한 id값')[0].scrollHeight);

<h1 class="mypage-h">채팅</h1>

<div class="chat-view con" id="chatContent">
	...
    	...
       		...
</div>


<script>
		<!-- 채팅 스크롤 하단으로 보내기 -->
	$('#chatContent').scrollTop($('#chatContent')[0].scrollHeight);
	
</script>

• 해당 코드의 경우 스크롤이 생기도록 한 채팅창의 높이값을 바탕으로 스크롤이 고정되기 때문에 제이쿼리를 밑에 삽입해야 기능이 작동한다.

해당 제이쿼리를 상단에 위치 시켰을 경우 발생하는 에러

제이쿼리를 적용한 채팅방 예시