Window scrollBy() 메서드

정의와 사용법

scrollBy() 메서드는 문서를 지정된 픽셀 수로 스크롤합니다.

훌륭한 팁:해야 할 경우 scrollBy() 메서드가 작동하려면, 문서가 화면보다 크고 스크롤바가 보이어야 합니다.

자세히 보기:

scrollTo() 메서드

예제

예제 1

문서를 수평으로 100px 스크롤하다:

window.scrollBy(100, 0);

직접 시도해 보세요

예제 2

문서를 수직으로 100px 스크롤하다:

window.scrollBy(0, 100);

직접 시도해 보세요

예제 3

문서를 위아래로 스크롤하다:

<button onclick="scrollWin(0, 50)">아래로 스크롤</button>
<button onclick="scrollWin(0, -50)">위로 스크롤</button>
<script>
function scrollWin(x, y) {
  window.scrollBy(x, y);
}
</script>

직접 시도해 보세요

예제 4

문서를 왼쪽과 오른쪽으로 스크롤하다:

<button onclick="scrollWin(100, 0)">오른쪽으로 스크롤</button>
<button onclick="scrollWin(-100, 0)">왼쪽으로 스크롤</button>
<script>
function scrollWin(x, y) {
  window.scrollBy(x, y);
}
</script>

직접 시도해 보세요

문법

window.scrollBy(x, y)

또는:

scrollBy(x, y)

파라미터

파라미터 설명
x

필수입니다. 스크롤할 픽셀 수(수평)

오른쪽으로 이동하면 음수, 왼쪽으로 이동하면 양수로 스크롤됩니다.
y

필수. 스크롤할 픽셀 수(수직)

양수는 아래로 스크롤, 음수는 위로 스크롤합니다.

반환 값

무.

브라우저 지원

모든 브라우저가 지원합니다 scrollBy()：

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