[JavaScript 채팅창] div 스크롤 자동으로 내려가게 만드는 방법

 

JavaScript 

채팅창 구현 시 필요한 div 스크롤 자동으로 내려가게 만드는 방법

 

1) 기본 코드 소스 

        let chat = document.querySelector('#chat');
        chat.scrollTop = chat.scrollHeight;

->chat 이라는 div가 채팅 창이 된다. 

 

 

 

2) 예시 

 

html

<div id="chatRoom">
    <div id="chat" onscroll="scrollFn()" >
        <div id="chat_greeting">
            <li class="chat_greeting" id="time"></li>

 

JavaScript

function send() {
    const msg = document.querySelector('#msg');
    if (msg.value == '') {
        return;
    } else {
        socket.emit('send', msg.value);
        msgAdd(msg.value, 'me');
        msg.value = '';
        
        let chat = document.querySelector('#chat');
        chat.scrollTop = chat.scrollHeight;
    }
}

 

 

 

 

여기서 console.log로 

        console.log('chat', chat)
        console.log('scrollheight',chat.scrollHeight);
        console.log('chatscrollTop', chat.scrollTop)

세 가지를 찍어보면 chat 창에 스크롤이 생기는 시점부터 scrollTop이 증가하면서 채팅창에 글을 쓸 때마다 스크롤이 자동으로 가장 아래에 위치하게 된다. 

 

scrollHeight 과 ScrollTop의 차이