원하는 곳으로 스크롤하기 - (getBountdingClientRect , scrollTo, scrollIntoView)

웹 페이지에서 버튼을 눌러 원하는 곳으로 스크롤 되게 해보자

 

const btnScrollTo = document.querySelector('.btn--scroll-to');
const section1 = document.querySelector('#section--1');

btnScrollTo.addEventListener('click', e => {
  const s1coords = section1.getBoundingClientRect();

  console.log(s1coords);
  window.scrollTo({
    left: s1coords.left,
    top: s1coords.top,
  });

});

 

btnScrollTo는 버튼 요소이고 section1이 버튼을 눌렀을때 스크롤되길 원하는 요소이다

 

버튼 요소에 이벤트리스너를 달아주고 getBountdingClientRect 함수를 통해 해당 요소의 좌표값을 구해준다 

 

 

s1coords를 콘솔에 출력하면 이렇게 생겼는데 해당 요소로부터 떨어져있는 거리가 나와있다 top과 left를 통해 요소의 상단과 왼쪽 위치를 구 할수 있다 

 

window.scrollTo 메서드에 객체를 넣어주는데 left와 top에 해당 값을 넣어준다 하지만 이렇게만 작성하면 제대로 작동하지 않을것이다 

 

 

 

 

현재 브라우저의 스크롤 위치에 따라 이동하는 위치가 달라진다 getBoundingClientRect()는 화면에 보이는 영역을 기준으로 요소의 위치를 계산하기 때문이다 따라서 좌표에 window.pageXOffset, window.pageYOffset을 더해줘 스크롤 위치가 문서 전체에 정확하게 계산되게 만들어준다 또한 behavior 프로퍼티를 이용해 부드러운 스크롤링 효과를 줄수도 있다

 

 

const btnScrollTo = document.querySelector('.btn--scroll-to');
const section1 = document.querySelector('#section--1');

btnScrollTo.addEventListener('click', e => {
  const s1coords = section1.getBoundingClientRect();

  window.scrollTo({
    left: s1coords.left + window.pageXOffset,
    top: s1coords.top + window.pageYOffset,
    behavior: 'smooth',
  });

});

 

 

코드 수정후 작동하는 모습

 

사실 이렇게 복잡하게 좌표계산을 통해 움직이지 않아도 된다 scrollIntoView를 메서드를 이용해 behavior값만 주기만 하면 원하는 좌표를 자동으로 계산해 스크롤이 이동하게 해준다 그러나 옛날 브라우저에서는 작동하지 않을 수도 있다 

 

const section1 = document.querySelector('#section--1');

// DOM 요소 선택후 scrollIntoView 메서드 사용
section1.scrollIntoView({ behavior: 'smooth' });

 

참고문서

https://developer.mozilla.org/ko/docs/Web/API/Element/getBoundingClientRect

Element.getBoundingClientRect() - Web API | MDN

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

Window.scrollTo() - Web API | MDN

 

https://developer.mozilla.org/ko/docs/Web/API/Element/scrollIntoView

element.scrollIntoView - Web API | MDN