HTML DOM의 scrollTop 속성은 HTML 문서에서 특정 요소의 콘텐츠가 세로 방향으로 스크롤된 거리(픽셀 단위)를 반환하거나 설정하는 데 사용됩니다. 이 속성을 활용하면 스크롤 위치를 실시간으로 확인하거나, 원하는 지점으로 스크롤을 이동시키는 등 다양한 인터랙션을 구현할 수 있습니다.
scrollTop 속성이란?
scrollTop 속성은 요소 내부 콘텐츠가 위쪽 경계에서부터 얼마나 스크롤되었는지를 픽셀 값으로 나타냅니다. 읽기 전용이 아니므로 값을 직접 할당하여 스크롤 위치를 프로그래밍 방식으로 제어할 수도 있습니다.
구문(Syntax)
1. scrollTop 값 반환하기
element.scrollTop
2. scrollTop 값 설정하기
element.scrollTop = value
여기서 value는 픽셀(px) 단위의 숫자 값입니다.
예제(Example)
다음 예제는 scrollTop과 scrollLeft 속성을 함께 사용하여, 박스 안에서 스크롤할 때마다 현재 스크롤 위치를 실시간으로 화면에 표시하는 방법을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
body{
text-align:center;
color:#fff;
background: #ff7f5094;
height:100%;
}
p{
font-weight:700;
font-size:1.8rem;
height:80px;
overflow:auto;
width:150px;
margin:20px auto;
}
.btn{
background:#0197F6;
border:none;
height:2rem;
border-radius:2px;
width:35%;
margin:2rem auto;
display:block;
color:#fff;
outline:none;
cursor:pointer;
}
.show{
font-size:1.5rem;
}
#myDIV {
height: 200px;
width: 200px;
overflow: auto;
margin:20px auto;
}
#content {
height: 400px;
width: 1000px;
background-color: lightblue;
}
</style>
</head>
<body>
<h1>DOM scrollLeft/scrollTop Property Demo</h1>
<div id="myDIV" onscroll="display()">
<div id="content"></div>
</div>
<div class="show"></div>
<script>
function display() {
var elmnt = document.getElementById("myDIV");
var x = elmnt.scrollLeft;
var y = elmnt.scrollTop;
document.querySelector(".show").innerHTML = "Top Scroll = " + x + "px Left Scroll = " + y + "px";
}
</script>
</body>
</html>실행 결과(Output)
위 코드를 실행하면 다음과 같은 화면이 나타납니다.
이제 파란색 박스 안에서 마우스 휠이나 스크롤바를 이용해 스크롤해 보세요. 스크롤할 때마다 아래 영역에 세로 스크롤(top scroll) 값과 가로 스크롤(left scroll) 값이 픽셀 단위로 실시간 갱신되어 표시됩니다.
정리
- scrollTop: 요소 콘텐츠의 세로 스크롤 위치를 픽셀 단위로 반환하거나 설정
- scrollLeft: 요소 콘텐츠의 가로 스크롤 위치를 픽셀 단위로 반환하거나 설정
- onscroll 이벤트와 함께 사용하면 스크롤 변화를 실시간으로 감지할 수 있음