[ JavaScript ] JS 스크롤 이동하기, scrollBy(현위치, 만큼)와 scrollTo(전체, 까지)의 차이

JS에서 스크롤 이동할 때 사용하는

비슷하지만 다른 scrollBy와 scrollTo에 대해 알아보자.

by와 to의 뜻으로 짐작해서 쓴다면 쉽게 헷갈리지 않을 것이다!

 

 

scrollBy(x-coord, y-coord)  위치하는 곳에서 ~만큼 이동

 

현재 위치에서 y좌표로 200px만큼 이동하기

x,y축으로이동할 만큼의 픽셀값을 지정해주기만 하면 된다. 

 

window.scrollBy(0,200);

 

오브젝트 형태로도 전달 가능하다. 

세로값인 y대신 top, 가로값인 x대신 left를 통해

이동할 만큼의 픽셀값을 지정한다.

 

window.scrollBy({ top: 100, left: 0 });

 

 

options - behaivor

 

window.scrollBy({
  top: 50,
  left: 20,
  behavior: 'smooth'
});

 

behaivor를 전달해서

smooth 부드럽게 움직일지, instant 점프로 즉시 이동할지,

auto(default) 브라우저 지정 기본값으로 움직일지 정할 수 있다.

 

 

 

 

scrollTo(x-coord, y-coord)  전체에서 여기까지로 이동

 

window.scrollTo(0,200);
window.scrollTo({ top: 100, left: 0 });

 

위의 scrollBy와 동일하게 스크롤을 이동하지만

차이점은 scrollBy는 현재의 위치에서 200px 이동하는 것이고

scrollTo는 전체에서 y축이 200px되는 위치로 이동하는 것이다.

 

 

window.scrollTo({
  top: 50,
  left: 20,
  behavior: 'smooth'
});

 

 options로 behaivor은

smooth, auto(default) 가 있다.

 

btn.addEventListener('click', () => {
    window.scrollBy({ top: 10, left: 0 });
});

btn.addEventListener('click', () => {
    window.scrollTo({ top: 10, left: 0 });
});

 

이런 코드가 있다고 하면, scrollBy는

버튼을 누를 때마다 y축으로 10px씩 스크롤이 이동하게 되고

scorllTo는 계속 눌러도 스크롤이 전체에서 y축이 10px인 위치에 있다.