JavaScript에서 일정한 시간 간격을 두고 요소의 스크롤 위치를 자동으로 조정하려면 scrollTop과 scrollHeight 속성의 개념을 활용하면 됩니다.
핵심 개념
- scrollTop: 요소가 현재 수직 방향으로 스크롤된 픽셀 값을 나타냅니다. 이 값을 변경하면 스크롤 위치가 즉시 이동합니다.
- scrollHeight: 스크롤되지 않은 영역까지 포함한 요소 전체 콘텐츠의 높이를 의미합니다.
따라서 scrollTop에 scrollHeight 값을 대입하면 해당 요소가 항상 맨 아래로 스크롤됩니다. 여기에 setInterval()을 조합하면 지정한 시간 간격마다 새로운 콘텐츠를 추가하고 자동으로 맨 아래로 스크롤할 수 있습니다.
예제 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자동 스크롤 예제</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style>
#scrollDemo {
height: 300px;
overflow-y: scroll;
}
#scrollDataFeatures {
height: 500px;
background-color: skyblue;
}
</style>
</head>
<body>
<div id="scrollDemo">
<div id="scrollDataFeatures"></div>
<h3>아래 메시지를 확인하고 위로 스크롤하세요</h3>
</div>
<script>
var scrollData = document.getElementById("scrollDemo");
// 페이지 로드 시 즉시 맨 아래로 스크롤
scrollData.scrollTop = scrollData.scrollHeight;
// 30초(30 * 1000ms)마다 실행
setInterval(() =>{
var heading3Data = document.createElement("h3");
heading3Data.innerHTML = "아래로 스크롤하세요... 다시 위로 올려주세요";
scrollData.appendChild(heading3Data);
// 새 콘텐츠 추가 후 다시 맨 아래로 스크롤
scrollData.scrollTop = scrollData.scrollHeight
}, 30*1000)
</script>
</body>
</html>실행 방법
위 코드를 원하는 파일명(예: index.html)으로 저장한 뒤, VSCode 편집기에서 해당 파일을 마우스 오른쪽 버튼으로 클릭하고 Open with Live Server(Live Server로 열기) 옵션을 선택하면 브라우저에서 프로그램을 바로 확인할 수 있습니다.
실행 결과
프로그램을 실행하면 처음에는 다음과 같은 화면이 출력됩니다.
그 후 매 30초마다 다음과 같은 메시지가 자동으로 추가되며, 화면 역시 맨 아래로 스크롤됩니다.
아래로 스크롤하세요... 다시 위로 올려주세요.
결과적으로 다음과 같은 화면을 볼 수 있습니다.
정리
이 예제에서 알 수 있듯이, scrollTop = scrollHeight 코드 한 줄만으로도 요소를 항상 최하단으로 이동시킬 수 있습니다. 채팅 애플리케이션이나 실시간 로그 뷰어처럼 새 데이터가 계속 추가되는 환경에서 유용하게 활용할 수 있습니다. 또한 setInterval()의 두 번째 인자인 밀리초(ms) 값을 조절하면 업데이트 주기를 자유롭게 변경할 수 있다는 점도 기억해 두면 좋습니다.