JS - 스크롤에 따른 DOM요소의 좌표 찾기

수직상의 위치

관련 API

• element.getBoundingClientRect() : 뷰포트를 이루는 가장자리와 element와의 거리 정보를 가지고 있는 객체를 리턴하는 메서드입니다. 반환하는 객체에는 top, bottom, left, right 프로퍼티가 있는데 이게 각각 뷰포트와의 방향별 거리를 의미합니다.
• window.pageYOffset : 수직 방향으로 얼마나 스크롤했는지 픽셀 단위로 알려주는 window의 속성입니다. window.scrollY와 같은 값을 가집니다.

위치 시작점에 따른 거리 구하기

// 수직으로 스크롤한 정도 + 뷰포트와의 거리
const distanceFromHtml = child.getBoundingClientRect().top + window.pageYOffset;

// 뷰포트와의 거리
const distanceFromViewport = child.getBoundingClientRect().top;
var divTop = div.getBoundingClientRect().top;
var divBottom = div.getBoundingClientRect().bottom;
var divLeft = div.getBoundingClientRect().left;
var divRight = div.getBoundingClientRect().right;

// 부모요소 뷰포트까지의 거리 - 자식요소 뷰포트까지의 거리
// 이 값은 스크롤에 상관없이 항상 같습니다.
const distanceBetweenParentAndChild =
  child.getBoundingClientRect().top - parent.getBoundingClientRect().top;

스크롤 API

• window.scrollTo(x좌표, y좌표) : 문서의 지정된 위치로 스크롤
• window.scrollBy(x좌표, y좌표) : 현재 스크롤 위치에서 x, y 만큼 더 스크롤

특정 요소의 절대좌표 알아내기

offset의 경우, 절대좌표가 아니라 가장 가까운 relative 속성을 가진 부모요소를 기준으로 상대위치를 구하는 것이다.

만약 부모요소 중에 relative가 적용되어있는 요소가 없다면, 최상위까지 올라가게 되어 최상위 요소의 시작 위치(0,0)부터 좌표가 시작하기 때문에 절대좌표 위치를 구할 수가 있다.

하지만 상위로 올라가는 도중에 relative가 적용되어있는 부모요소가 있다면, 그 요소의 시작점부터 좌표위치가 시작되므로 정확한 절대좌표를 알아낼 수가 없다.

아래 예제는 스크롤 이동거리 + 현재화면 기준 상대경로 값으로 절대경로를 구하는 방법이다.

var div = document.getElementById("div_id");
var divTop = div.getBoundingClientRect().top;
var absoluteTop = window.pageYOffset + div.getBoundingClientRect().top;

 

해당 요소로 스크롤하기

//상단에 fixed 메뉴영역이 있다면, 메뉴때문에 메뉴의 높이만큼 스크롤이 가려질 수 있다.
var menuHeight = document.querySelector(".menu").offsetHeight; // 메뉴의 높이
var divTop = document.querySelector("#div_id").offsetTop; // 스크롤 위치

//메뉴의 높이만큼 빼서 스크롤을 메뉴 높이만큼 올라가게 해준다.
window.scrollTop({top:divTop - menuHeight, behavior:'smooth'});
document.getElementById('div_id').scrollIntoView();

 

 

참고

https://maxkim-j.github.io/posts/dom-pos-scroll/

스크롤에 따른 DOM 요소의 좌표 얻는 법