[JS/jQuery] 스크롤 가장 하단으로 이동시키기

채팅방을 구현할 때 채팅내용이 보이는 영역은

overflow: auto를 시켜두고 주고 받은 내용이 많아질 경우 스크롤되도록 처리함.

 

단, 아무런 처리를 해두지 않았을 경우에는 스크롤이 최상단에 있어 최근 내용을 보기 위해서는

스크롤을 가장 하단으로 내려야 함.

 

따라서 채팅방에서 스크롤 이벤트를 발생시켜야 하는 경우는 크게

1. 채팅방 Load 시점

2. 메시지 수신 시점

3. 메시지 발송 시점

4. 과거 메시지를 읽다가 최근 메시지로 바로 돌아오고자 하는 버튼 이벤트

<style>
    #chat_container {
    	height: 50vh;
        overflow: auto;
    }
    #chat_body {
    	position: relative;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        flex-direction: column;
        width: 100%;
        height: 100%;
    }
    #chat_messages {
        position: relative;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        flex-direction: column;
        flex-wrap: wrap;
        width: 100%;
        padding: 16px;
	}
    .message_wrap.send {
        flex-direction: row-reverse;
        margin-left: auto;
    }
    .message_wrap {
        position: relative;
        display: flex;
        align-items: flex-end;
        justify-content: flex-end;
        margin: 12px 0;
    }
    .message_wrap.send > span.message {
        background-color: #94b5e7;
    }
    .message_wrap > span.message {
        padding: 12px 24px;
        border-radius: 8px;
    }
    .message_wrap.receive > span.message {
        background-color: #eee;
    }
    .message_wrap.receive > span.message_time {
        margin-left: 8px;
    }
</style>

<div id="chat_container">
  <div id="chat_body">
    <div id="chat_messages">
      <div class="message_wrap send">
        <span class="message">메시지 발송 테스트</span>
        <span class="message_time">2021-01-27 15:18:50</span>
      </div>

      <div class="message_wrap send">
        <span class="message">ㅎㅎ</span>
        <span class="message_time">2021-01-27 15:22:43</span>
      </div>

      <div class="message_wrap receive">
        <span class="message">ㅎㅇ</span>
        <span class="message_time">2021-01-27 15:23:07</span>
      </div>

      <div class="message_wrap send">
        <span class="message">ㅎㅇㅇㅎ</span>
        <span class="message_time">2021-01-27 15:26:15</span>
      </div>

      <div class="message_wrap send">
        <span class="message">gdgd</span>
        <span class="message_time">2021-01-27 15:53:41</span>
      </div>

      <div class="message_wrap receive">
        <span class="message">ss</span>
        <span class="message_time">2021-01-27 15:53:45</span>
      </div>

      <div class="message_wrap receive">
        <span class="message">cc</span>
        <span class="message_time">2021-01-27 15:54:21</span>
      </div>

      <div class="message_wrap send">
        <span class="message">gx</span>
        <span class="message_time">2021-01-27 15:56:40</span>
      </div>

      <div class="message_wrap send">
        <span class="message">gxcc</span>
        <span class="message_time">2021-01-27 15:56:46</span>
      </div>

      <div class="message_wrap send">
        <span class="message">vv</span>
        <span class="message_time">2021-01-27 16:00:09</span>
      </div>

      <div class="message_wrap receive">
        <span class="message">zz</span>
        <span class="message_time">2021-01-27 16:02:58</span>
      </div>

      <div class="message_wrap send">
        <span class="message">zz</span>
        <span class="message_time">2021-01-27 20:39:03</span>
      </div>
    </div>
  </div>
</div>

채팅창의 태그는 대략 이러한 형태로 되어있다면,

 

<script>
	// overflow 속성을 먹고 있는 요소를 element에 넣으면 된다.
	// $(element).scrollTop($(element)[0].scrollHeight);
    
    // 위 예제코드를 기준으로 작성
    $('#chat_container').scrollTop($('#chat_container')[0].scrollHeight);
    
    // 채팅방이 로드 되었을 때
    $(document).ready(function(){
    	$('#chat_container').scrollTop($('#chat_container')[0].scrollHeight);
        
        // 메시지를 수신 했을 때
        conn.onmessage = function(e) {
        	$('#chat_container').scrollTop($('#chat_container')[0].scrollHeight);
        };
        
        // 메시지 발송 했을 때
        conn.send = function(e) {
        	$('#chat_container').scrollTop($('#chat_container')[0].scrollHeight);
        };
        
        // 하단 스크롤 이동 버튼
        $('.scroll_bottom_btn').click(function(e){
        	$('#chat_container').scrollTop($('#chat_container')[0].scrollHeight);
            // 애니메이션 효과를 주고 싶다면
            // $('#chat_container').animate({
            //  	scrollTop: $('#chat_container')[0].scrollHeight
            // }, 400);
        });
    });
</script>