[Web API] scrollBy

Window.scrollBy는 문서의 지정된 위치로 스크롤합니다.
현재좌표 좌표를 기준으로 페이지를 스크롤합니다.

scrollTo와의 차이점은 scrollTo는 절대좌표를 기준으로 스크롤하고 scrollBy는 상대좌표(현재 스크롤 위치)를 기준으로 스크롤합니다.

 

사용법

window.scrollBy(x_좌표, y_좌표)
Element.scrollBy(x_좌표, y_좌표)

// 또는

window.scrollBy(scrollByOptions)
Element.scrollBy(scrollByOptions)

 

매개변수

• x_좌표는 스크롤할 수평 픽셀값
• y_좌표는 스크롤할 수직 픽셀값

또는

• scrollByOptions
  • top 창 또는 요소를 스크롤할 Y축을 따라 픽셀 수를 지정
  • left 창 또는 요소를 스크롤할 X축을 따라 픽셀 수를 지정
  • behavior 스크롤을 즉시적용할지 아니면 부드러운 애니메이션을 적용할지 결정
    • smooth 스크롤이 부드럽게 움직임
    • instant 스크롤이 즉시 적용
    • auto 스크롤 동작이 계산된 scroll-behavior값에 의해 결정

 

예제

한 페이지 아래로 스크롤하려면

window.scrollBy(0, window.innerHeight);

위로 스크롤하려면

window.scrollBy(0, -window.innerHeight);

scrollByOptions사용

window.scrollBy({
  top: 100,
  left: 100,
  behavior: "smooth",
});