개요
HTML의 Window pageYOffset 속성은 현재 문서가 페이지 원점(왼쪽 상단 모서리)을 기준으로 세로 방향으로 얼마나 스크롤되었는지를 픽셀(px) 단위로 반환합니다. 이 속성은 읽기 전용이며, 스크롤 위치에 따라 특정 요소를 표시하거나 애니메이션을 제어하는 등 다양한 UI 인터랙션을 구현할 때 유용하게 활용됩니다.
참고로 pageYOffset은 window.scrollY와 동일한 값을 반환하며, 모든 최신 브라우저에서 지원됩니다.
구문(Syntex)
기본 구문은 다음과 같습니다 −
window.pageYOffset
예제
다음 예제는 HTML Window pageYOffset 속성의 실제 사용법을 보여줍니다 −
<!DOCTYPE html>
<html>
<style>
body {
color: #000;
height: 100vh;
background-color: #8BC6EC;
background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%) no-repeat;
text-align: center;
}
.btn {
background: #db133a;
border: none;
height: 2rem;
border-radius: 2px;
width: 40%;
display: block;
color: #fff;
outline: none;
cursor: pointer;
margin: 1rem auto;
}
.box {
width: 1000px;
height: 1000px;
background: teal;
color: #fff;
font-size: 1.5rem;
text-align: left;
padding: 20px;
}
</style>
<body>
<h1>HTML Window pageYOffset Property Demo</h1>
<button onclick="scrollFn()" class="btn">Scroll</button>
<button onclick="display()" class="btn">Show pageYOffset value</button>
<div class="box"></div>
<script>
function display() {
document.querySelector('.box').innerHTML = 'The value of pageYOffset is: ' + window.pageYOffset + 'px';
}
function scrollFn() {
window.scrollBy(0, 10);
}
</script>
</body>
</html>위 코드에서 Scroll 버튼은 window.scrollBy(0, 10)를 호출하여 클릭할 때마다 페이지를 10px씩 아래로 스크롤하고, Show pageYOffset value 버튼은 현재 pageYOffset 값을 화면에 출력합니다.
실행 결과
먼저 "Show pageYOffset value" 버튼을 클릭하면 pageYOffset 속성의 현재 값이 화면에 표시됩니다:
이제 "Scroll" 버튼을 클릭하여 페이지를 스크롤해 보세요 −
그런 다음 다시 "Show pageYOffset value" 버튼을 클릭하면 스크롤 후 변경된 pageYOffset 값을 확인할 수 있습니다 −
