[Javascript] JavaScript로 스크롤 조작하기, scrollTo(), scrollBy(), scrollIntoView()

scrollTo(), scrollBy(), scrollIntoView() 메서드를 활용해 스크롤 조작하는 방법에 대해서 알아보겠습니다.

scrollTo()

이동할 좌표값을 받아 절대적인 위치로 스크롤을 이동시킵니다.

window.scrollTo(x좌표, y좌표);

 

scrollTo() 예시

//문서의 상단으로 스크롤 이동
window.scrollTo(0, 0);

//문서의 200px 위치로 스크롤 이동
window.scrollTo(0, 200);

//문서의 300px, 500px 위치로 스크롤 이동
window.scrollTo(300, 500);

scrollBy()

이동할 좌표값을 받아 현재 위치에서 상대적인 위치로 스크롤을 이동시킵니다.

window.scrollBy(x좌표, y좌표);

scrollBy() 예시

//현재 위치에서 100px 아래로 스크롤
window.scrollBy(0, 100);

//현재 위치에서 200px 오른쪽, 100px 아래로 스크롤
window.scrollBy(200, 100);

scrollIntoView()

지정한 요소가 보이도록 스크롤을 이동시킵니다.

document.queryselector(".target").scrollIntoView();

이 메서드는 기본값으로 요소를 스크롤의 상단에 위치시킵니다. 

그러나 옵션값을 설정해 스크롤을 부드럽게도 타깃 요소의 중앙이나 하단에 위치시킬 수도 있습니다. 

• behavior: auto, smooth
• block: top, center, bottom

document.document.queryselector(".target").scrollIntoView({
  behavior: "smooth", //스크롤 애니메이션을 부드럽게 처리합니다.
  block: "center" //요소를 스크롤의 중앙에 위치시킵니다.
});

 

 

이렇게 JavaScript로 스크롤 조작하기에 대해서 알아보았습니다.

 

 

 

현재 스크롤Y값 구하기