[Web APIs] scrollBy, scrollTo, scrollIntoView

💡 Window.scrollBy()

window 창에 있는 document를 지정된 크기만큼 스크롤한다

 

Syntax

window.scrollBy(x-coord, y-coord);
window.scrollBy(options)

예를 들어 window.scrollBy(0, 100)  이면 수직으로 100px씩 스크롤

 

💡 Window.scrollTo()

document의 특정 좌표로 스크롤

 

Syntax

window.scrollTo(x-coord, y-coord)
window.scrollTo(options)

예를 들어 window.scrollTo(0, 100)이면 y축이 100px 인곳으로 스크롤

 

💡 Element.scrollIntoView()

Element의 위치로 스크롤 

 

Syntax

element.scrollIntoView();
element.scrollIntoView(alignToTop); // Boolean parameter
element.scrollIntoView(scrollIntoViewOptions); // Object parameter

Example

var element = document.getElementById("box");

element.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"});

* Optional

• behavior
  transition animation. auto or smooth 중 하나 선택 (Default auto)
  smooth 옵션을 주면 부드럽게 스크롤링!
  
• block
  수직으로 스크롤링될 때 정렬. start, center, end, or nearest. (Default start)
  start:  element의 젤 윗부분이 브라우저 맨 위로 오도록 정렬
  center: element가 브라우저 중간으로 오도록 정렬
  end: element의 젤 아랫부분이 브라우저 맨 밑으로 오도록 정렬
  nearest: 가까운 곳
• inline
  수직으로 스크롤링될 때 정렬 start, center, end, or nearest. (Default nearest)

 

 

 

MDN 참고

scrollIntoView https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

scrollBy https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollBy

scrollTo https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo