JavaScript의 scrollY 속성은 pageYOffset 속성과 완전히 동일하게 작동합니다. 이 속성은 현재 문서가 브라우저 창의 왼쪽 위 모서리를 기준으로 세로 방향으로 몇 픽셀만큼 스크롤되었는지를 반환합니다.
페이지를 아래로 스크롤할수록 scrollY 값이 커지며, 스크롤하지 않은 초기 상태에서는 0을 반환합니다. 반대로 가로 방향의 스크롤 위치가 필요하다면 scrollX 속성을 사용하면 됩니다.
scrollY는 읽기 전용 속성으로, 모든 최신 브라우저에서 지원됩니다. 구버전 Internet Explorer까지 호환해야 한다면 같은 값을 반환하는 pageYOffset을 대신 사용하는 것이 좋습니다.
scrollY 속성 사용 예제
다음 코드를 실행하고 버튼을 클릭하면 페이지가 200픽셀씩 스크롤되며, 현재 세로 스크롤 위치가 알림 창으로 표시됩니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: yellow;
height: 1500px;
width: 1500px;
}
</style>
</head>
<body>
<script>
function scrollFunc() {
window.scrollBy(200, 200);
alert("세로 스크롤 위치: " + window.scrollY);
}
</script>
<button onclick="scrollFunc()" style="position:fixed;">스크롤</button>
<br><br><br>
<div>
</div>
</body>
</html>코드 설명
window.scrollBy(200, 200): 창을 가로 200px, 세로 200px씩 상대적으로 스크롤합니다.window.scrollY: 스크롤된 세로 방향 픽셀 값을 반환하여 알림 창에 표시합니다.- 버튼에
position: fixed스타일을 적용해 페이지가 스크롤되어도 버튼이 화면에 고정되도록 했습니다.
이처럼 scrollY 속성은 무한 스크롤 구현, 스크롤 위치에 따른 헤더 표시 여부 결정, 특정 지점 도달 시 애니메이션 실행 등 다양한 UI 인터랙션에서 유용하게 활용됩니다.