Javascript Window Scroll과 관련된 메소드에 대해 알아보기

좌표값과 더불어 웹 UI개발을 할때 거의 항상 쓰이는 window scroll과 관련된 Window 메소드에 대해 알아보자.

---

# window.scrollTo() 

지정된 좌표값으로 웹브라우저의 스크롤을 이동시킨다.

const $btn = document.querySelector('.btn');
$btn.addEventListener('click', () => {
  // window.scrollTo(x좌표, y좌표);
  window.scrollTo(0, 250);
});

 

스크롤 이동을 부드럽게 하려면 parameter를 객체 형태로 전달하면서 behavior:'smooth'를 추가로 전달한다.

const $btn = document.querySelector('.btn');
$btn.addEventListener('click', () => {
  // window.scrollTo({left:x좌표, top:y좌표, behavior:'smooth'});
  window.scrollTo({left:0, top:250, behavior:'smooth'});
});

 

---

# window.scrollBy() 

웹브라우저의 현재 스크롤 위치에서 전달된 값만큼 스크롤을 이동시킨다.

const $btn = document.querySelector('.btn');
$btn.addEventListener('click', () => {
  // window.scrollBy(x좌표, y좌표)
  window.scrollBy(0, 100);
});

 

스크롤 이동을 부드럽게 하려면 parameter를 객체 형태로 전달하면서 behavior:'smooth'를 추가로 전달한다.

const $btn = document.querySelector('.btn');
$btn.addEventListener('click', () => {
  // window.scrollBy({left:x좌표, top:y좌표, behavior:'smooth'})
  window.scrollBy({left:0, top:150, behavior:'smooth'});
});

 

 

---

# Element.scrollIntoView()

특정 Element의 위치로 웹브라우저의 스크롤을 이동시킨다.

const $btn = document.querySelector('.btn');
const $Element = document.querySelector('.box');
$btn.addEventListener('click', () => {
  $Element.scrollIntoView();
});

 

스크롤 이동을 부드럽게 하려면 parameter를 객체 형태로 전달하면서 behavior:'smooth'를 추가로 전달한다.

const $btn = document.querySelector('.btn');
const $Element = document.querySelector('.box');
$btn.addEventListener('click', () => {
  $Element.scrollIntoView({behavior:'smooth'});
});

 

---

잘 이해했다. 행동하자.

Javascript Window Scroll과 관련된 메소드에 대해 알아보기

 

*엘리의 드림코딩 영상을 보며 이해한 내용을 정리하며 글로 옮겼다.