[javascript 메서드 정리] 스크롤 이동 메서드 window.scroll() VS window.scrollTo() VS window.scrollBy()

#결론

- 스크롤을 이동할때 쓰는 메서드

- 설정한 값이 적용되는 기준점이 다르다. 

- 기준점은 다음과 같이 다름.

 

메서드	Window.scroll()	Window.scrollTo()	Window.scrollBy()
기준점	- 문서의 왼쪽 상단 기준	- 문서의 왼쪽 상단 기준	- 뷰포트 왼쪽 상단 기준 (현재 스크롤 위치 기준)
특징	- 절대적인 값. - 문서의 왼쪽 상단 기준으로 지정한 값으로 스크롤이 이동 한다.  - Window.scrollTo() 와 같음	- 절대적인 값 - 문서의 왼쪽 상단 기준으로 지정한 값으로 스크롤이 이동 한다.  - Window.scroll() 와 같음	- 상대적인 값 - 현재 스크롤 위치가 어디인가에 따라 이동 후의 위치가 바뀐다.  - 현재 스크롤된 위치 + 설정한 값으로 스크롤이 이동된다
사용법	window.scroll(x-좌표, y-좌표) * 옵션을 사용하고 싶다면, window.scroll({   top: y좌표,   left: y좌표,   behavior: 'smooth' });	window.scrollTo(x-좌표, y-좌표) * 옵션을 사용하고 싶다면, window.scrollTo({   top: y좌표,   left: y좌표,   behavior: 'smooth' });	window.scrollBy(x-좌표, y-좌표) * 옵션을 사용하고 싶다면, window.scrollBy({   top: y좌표,   left: y좌표,   behavior: 'smooth' });

 

# 예제

* 하단 예제 속 버튼을 눌러본 후, 현재 스크롤 값이 어떻게 변하나 살펴보자.

- Window.scroll(), Window.scrollTo() 의 경우, 문서 왼쪽 상단을 기준으로 500px이동하고,

- Window.scrollBy() 의 경우, 뷰포트 왼쪽 상단 기준(현재 스크롤 위치 기준) 으로 500px이동함을 알 수 있다.

 

https://codepen.io/todak/pen/WNgJQrg

scroll() , scrollTo(), scrollBy()

 

 

---

 

* 참고

https://developer.mozilla.org/ko/docs/Web/API/Window/scrollBy

https://developer.mozilla.org/ko/docs/Web/API/Window/scroll

https://developer.mozilla.org/ko/docs/Web/API/Window/scrollTo