[JS, JAVASCRIPT] 스크롤을 부드럽게 이동시키기(scroll behavior: smooth)

바닐라 자바스크립트로 스크롤 애니메이선을 고민하며 구글링하다 알게되었다.

사용법도 간단하답

window.scroll({
  top: 0,
  left: 100,
  behavior: 'smooth'
});

top:창이나 요소를 스크롤하기 위해 Y축을 따라 픽셀 수를 지정

left : 창이나 요소를 스크롤하기 위해 X축을 따라 픽셀 수를 지정

behavior : 스크롤 애니메이션 설정(auto: 기본값, 즉시실행 / smooth : 부드럽게 스크롤 애니메이션)

 

공식문서를 보면 Window.scroll()뿐만 아니라 Window.scrollTo(),Window.scrollBy()에서도 적용가능하다고 한다.  

 

참고:

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

 

+

js만 있는 줄 알았는데 css로도 지정해서 사용할 수 있었다.

이쪽을 참고하시길... 나중에 직접쓰게 되면 따로 글로 써보는 걸로..

https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior

나름 자주쓰게 될 것 같아 적어봤다.