div에 자동 스크롤 기능 적용하기

div의 innerHTML 속성에 문자열을 이어 붙일 때 스크롤바를 자동으로 맨 밑으로 이동시겨 보겠습니다.

 

1. 자동 스크롤 테스트를 위한 HTML 코드 작성.

<div id="log"></div>

<div>
  <input type='text' id=msg />
  <button onClick="addLog()">ADD LOG</>
</div>

 

2. div에 overflow style 추가..

#log {
  white-space: pre; 
  overflow-y: scroll;
  width:300px;
  height:100px;
  border:1px solid black;
}

 

3. JavaScript 코드 추가.

const log = document.getElementById("log");

log.isScrollBottom = true;

log.addEventListener("scroll", (event) => {
  if (event.target.scrollHeight - event.target.scrollTop === event.target.clientHeight) {
    log.isScrollBottom = true;
  } else {
    log.isScrollBottom = false;
  }
});


const addLog = () => {
  const msg = document.getElementById("msg").value;
  
  log.innerHTML += `${msg}\r\n`;
  
  if (log.isScrollBottom) {
    log.scrollTop = log.scrollHeight;
  }
};

 

메시지를 추가하면 자동으로 스크롤이 맨 밑으로 이동하고, 마우스로 스크롤을 움직이면 자동 스크롤이 해제됩니다.

 

마우스로 스크롤바를 맨 밑으로 이동시키면 자동 스크롤이 다시 설정됩니다.

 

전체 테스트 코드는 아래에서 확인가능합니다.

 

See the Pen scroll to bottom by Hyungjun Kim (@hyungjun-kim) on CodePen.