HTML DOM 요소 scrollTop 속성

정의와 사용법

scrollTop 속성을 설정하거나 요소의 내용이 수직으로 스크롤된 픽셀 수를 반환합니다。

또한 참조하십시오：

scrollLeft 속성

CSS overflow 속성

onscroll 이벤트

예제

예제 1

"myDIV" 의 스크롤된 내용의 픽셀 수를 얻습니다：

const element = document.getElementById("myDIV");
let x = elmnt.scrollLeft;
let y = elmnt.scrollTop;

직접 시도해 보세요

예제 2

"myDIV" 의 내용을 수평으로 50 픽셀, 수직으로 10 픽셀로 스크롤합니다：

const element = document.getElementById("myDIV");
element.scrollLeft = 50;
element.scrollTop = 10;

직접 시도해 보세요

예제 3

"myDIV" 의 내용을 수평으로 50 픽셀, 수직으로 10 픽셀로 스크롤합니다：

const element = document.getElementById("myDIV");
element.scrollLeft += 50;
element.scrollTop += 10;

직접 시도해 보세요

예제 4

<body>의 내용을 수직으로 10 픽셀, 수평으로 30 픽셀 스크롤합니다:

const html = document.documentElement;
html.scrollLeft += 30;
html.scrollTop += 10;

직접 시도해 보세요

예제 5

사용자가 페이지 상단에서 아래로 50 픽셀을 스크롤할 때, 요소에 "test" 클래스를 추가하고 다시 상단으로 스크롤할 때 제거합니다 -

window.onscroll = function() {myFunction()};
function myFunction() {
  document.getElementById("myP").className = "test";
    else {
  }
    document.getElementById("myP").className = "";
  }
}

직접 시도해 보세요

예제 6

사용자가 페이지 상단에서 아래로 350 픽셀을 스크롤할 때 요소에 slideUp 클래스를 추가합니다:

window.onscroll = function() {myFunction()};
function myFunction() {
  if (document.body.scrollTop > 350 || document.documentElement.scrollTop > 350) {
    document.getElementById("myImg").className = "slideUp";
  }
}

직접 시도해 보세요

문법

scrollTop 속성 반환:

element.scrollTop

scrollTop 속성 설정:

element.scrollTop = pixels

속성 값

값 설명
pixels

요소 내용이 수직으로 스크롤되는 픽셀 수.

  • 이 값이 음수라면, 이 값을 0으로 설정합니다.
  • 요소가 스크롤할 수 없다면, 이 값을 0으로 설정합니다.
  • 이 값이 허용 가능한 최대 값보다 크다면, 이 값을 최대 값으로 설정합니다.

반환 값

형식 설명
숫자 요소 내용이 수직으로 스크롤되는 픽셀 수.

브라우저 지원

모든 브라우저가 지원합니다 element.scrollTop：

크롬 IE 에지 파이어폭스 사파리 오페라
크롬 IE 에지 파이어폭스 사파리 오페라
지원 지원 지원 지원 지원 지원