HTML Window screenTop 속성은 현재 브라우저 창이 화면을 기준으로 위치한 세로(수직) 좌표를 픽셀(px) 단위로 반환합니다. 예를 들어 창이 화면 최상단에서 150픽셀 아래쪽에 있다면, 이 속성은 150이라는 값을 반환합니다.
주의: 이 속성은 Firefox 브라우저에서는 지원되지 않습니다. Chrome, Edge, Safari 등 대부분의 주요 브라우저에서는 정상적으로 동작하지만, 다양한 브라우저를 지원해야 하는 프로젝트라면 이 호환성 문제를 반드시 고려해야 합니다.
문법(Syntax)
screenTop 속성의 사용 문법은 다음과 같습니다 −
window.screenTop
예제 코드
HTML Window screenTop 속성의 실제 동작을 확인할 수 있는 예제입니다 −
<!DOCTYPE html>
<html>
<style>
body {
color: #000;
height: 100vh;
background-color: #8BC6EC;
background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
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;
}
.show {
font-size: 1.2rem;
}
</style>
<body>
<h1>HTML Window screenTop 속성 데모</h1>
<button onclick="display()" class="btn">screenTop 값 보기</button>
<div class="show"></div>
<script>
function display() {
document.querySelector('.show').innerHTML = '화면을 기준으로 한 창의 세로 좌표는: ' + window.screenTop + 'px';
}
</script>
</body>
</html>실행 결과
페이지에서 "screenTop 값 보기" 버튼을 클릭하면, 화면을 기준으로 한 현재 창의 세로 좌표가 아래와 같이 표시됩니다:
창의 위치를 위아래로 이동한 후 버튼을 다시 클릭하면, 그때마다 변경된 좌표 값이 실시간으로 갱신되는 것을 확인할 수 있습니다. 이처럼 screenTop 속성은 팝업 창 위치 제어나 멀티 윈도우 환경에서 창의 화면상 위치를 파악해야 할 때 유용하게 활용됩니다.