JavaScript에서 스크롤(scroll) 이벤트는 사용자가 스크롤바를 위아래로 움직이거나, 마우스 휠·터치·키보드 방향키 등으로 화면을 스크롤할 때마다 발생하는 이벤트입니다. 이 이벤트를 활용하면 무한 스크롤, 헤더 고정·숨김, 스크롤 진행률 표시 등 다양한 인터랙티브 기능을 구현할 수 있습니다.
JavaScript 스크롤 이벤트 예제 코드
다음은 window 객체에 addEventListener()로 스크롤 이벤트 리스너를 등록하고, 스크롤이 발생하면 화면에 메시지를 출력하는 기본 예제입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JavaScript 스크롤 이벤트</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
height: 150vh; /* 스크롤바가 생기도록 높이 지정 */
}
.result {
font-size: 18px;
color: blueviolet;
font-weight: 500;
}
</style>
</head>
<body>
<h1>JavaScript 스크롤 이벤트</h1>
<div class="result"></div>
<h3>스크롤바를 움직이면 위 문단에 텍스트가 나타납니다.</h3>
<script>
let resEle = document.querySelector(".result");
window.addEventListener("scroll", () => {
resEle.innerHTML = "스크롤 이벤트가 발생했습니다!";
});
</script>
</body>
</html>
실행 결과
페이지를 조금 아래로 스크롤하면 다음과 같이 메시지가 표시됩니다.
실무에서 알아두면 좋은 스크롤 이벤트 팁
1. 현재 스크롤 위치 확인하기
window.scrollY(세로)와 window.scrollX(가로) 속성을 사용하면 현재 스크롤된 픽셀 위치를 실시간으로 확인할 수 있습니다.
window.addEventListener("scroll", () => {
console.log("현재 세로 스크롤 위치:", window.scrollY);
});
2. 성능 최적화: passive 옵션
스크롤 이벤트는 짧은 시간 안에 매우 자주 발생하므로, 성능이 중요한 경우 { passive: true } 옵션을 함께 사용하는 것이 좋습니다. 이 옵션은 해당 리스너 내부에서 preventDefault()를 호출하지 않는다는 것을 브라우저에 미리 알려주어, 스크롤 렌더링이 부드러워집니다.
window.addEventListener("scroll", () => {
// 스크롤 처리 로직
}, { passive: true });
3. 이벤트 빈도 줄이기: 스로틀(Throttle)
무거운 작업(예: DOM 조작, 이미지 로딩)을 스크롤마다 실행하면 성능 저하가 발생할 수 있습니다. 이때 requestAnimationFrame이나 타이머 기반 스로틀링으로 실행 빈도를 조절하는 것이 일반적인 모범 사례입니다.