스크롤 생성, 하단 고정

스크롤 생성

원하는 태그에
overflow-y : auto;
height: 높이설정;

.chat-container {
    display: flex;
    flex-direction: column;
    padding-left: 10px;
    background: #f9f9f9;
    height: 100vh;
}

.chat-window {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 10px;
    overflow-y: auto;
}

• display: flex; 자식 요소들은 flex

• flex-direction: column; 자식 요소들을 수직 방향으로 배치
  자식 요소들은 위에서 아래로 쌓인다

  ** 그 반대는 column-reverse

• overflow-y: auto; 콘텐츠가 수직으로 넘칠 경우 스크롤 바가 자동으로 표시

  	** scrool; -> 항상 스크롤 표시

• flex: 1;:사용 가능한 모든 여유 공간을 차지하도록 설정

• justify-content: flex-end; 자식 요소들이 컨테이너의 아래쪽에 정렬 => 채팅 메시지들이 항상 하단에 위치

스크롤 하단 고정

링크텍스트

링크텍스트

스크롤바를 하단에 고정하기 위해 필요한 값이 2개(scrollTop, scrollHeight)

scrollTop은 스크롤 바의 최상단 위치 값

스크롤이 내려가지 않은 상태의 scrollTop 값은 0이며, 스크롤이 내려갈수록 값은 증가

document.addEventListener("DOMContentLoaded", function() {
    var chatWindow = document.getElementById("chatWindow");
    chatWindow.scrollTop = chatWindow.scrollHeight; // 페이지 로드 시 스크롤을 최하단으로 이동

// 메시지 제출 후 페이지가 새로 로드되면 스크롤을 최하단으로 이동
document.querySelector(".chat-input-form").addEventListener("submit", function() {
    setTimeout(function() {
        chatWindow.scrollTop = chatWindow.scrollHeight;
    }, 100); // 메시지 전송 후 약간의 지연을 두고 스크롤을 이동
});

});