[JavaScript] 요소의 절대좌표 상대좌표 구하기

출처 : mommoo.tistory.com/85

 

절대위치 와 상대위치란?

절대위치는 시작점으로 부터 떨어진 크기 값입니다. 중요한건 시작점이 어디인지 아는것이 매우 중요합니다. 따라서, 자바스크립트의 절대위치의 시작점은 어디서 부터 인지 후에 설명 할 예정입니다.

상대위치는 어떤 기준으로 부터 떨어진 크기 값입니다. 어떤 기준은 시작점도 될 수 있으며, 시작점이 아닌 다른 곳을 기준으로 삼을 수도 있습니다. 마찬가지로 자바스크립트는 어떤 기준을 어떻게 세우는지를 후에 설명 할 예정입니다.

 

자바스크립트의 절대위치 와 상대위치의 기준

해당 그림의 회색 네모 부분은 컨텐츠 길이를 의미합니다. 너무 길이서 브라우저에서 스크롤을 하면서 봐야 합니다. 크롬 브라우저의 하얀 네모부분은 Viewport 라고 합니다. 우리가 자주 쓰는 window 객체의 화면 API의 기준이 되는 부분입니다. 또한 그림에서 Hello World!! , Hello JavaScript!! 문자 요소가 존재하며, 크롬 브라우저는 스크롤 되어,컨텐츠의 Hello World!! 요소를 지나 현재 Hello JavaScript!!! 요소를 보여주고 있는 상태입니다. 해당요소의 절대위치 와 상대위치를 구하는 방법을 통해 설명할까 합니다.

해당 그림은 아래 설명에서 전반적으로 계속 사용될 예정입니다.

창을 2개 켜서 해당 그림이랑 같이 읽는걸 강력하게 추천합니다.

 

 

 

자바스크립트의 절대위치의 시작점은 그림의 컨텐츠의 시작점을 의미 합니다.

따라서, Hello World!!의 요소와 Hello JavaScript!!의 요소의 절대좌표는 컨텐츠 시작점으로 떨어진 거리를 의미 합니다. 즉 그림의 1번 길이라 볼 수 있습니다.

자바스크립트의 상대위치의 어떤 기준은 누굴 선택하느냐 문제입니다. 여러가지가 있지만, 해당 예시는 그림의 브라우저가 보여주는 스크롤된 컨텐츠 시작 부분 즉, Viewport 의 시작지점을 기준으로 삼는다고 가정하면 그림의 2번 길이라 볼 수 있습니다.

 

자바스크립트로 상대위치 구하기

상대위치 구하는 방법부터 기술하는 이유는 절대위치를 구하기 위해서는 상대위치를 이용해서 구해야 하기 때문입니다. 또한 절대위치는 콘텐츠의 시작 기준이므로, 음수 값은 잘 나오지 않는 반면 상대위치는 기준이 천차만별이므로, 음수 값이 빈번하게 나올 수 있습니다.

앞서 언급한대로 상대위치는 어떤 기준이 매우 중요합니다. 준비한 예시는 2가지의 기준으로 설명합니다.

Viewport의 시작지점 기준

해당 자바스크립트 API는 getBoundingClientRect 이며 예시는 아래와 같습니다.

const target = document.getElementById('target'); // 요소의 id 값이 target이라 가정
const clientRect = target.getBoundingClientRect(); // DomRect 구하기 (각종 좌표값이 들어있는 객체)
const relativeTop = clientRect.top; // Viewport의 시작지점을 기준으로한 상대좌표 Y 값.

예시 그림의 2번 길이를 기준으로 만약 Hello World!! 요소라면 음수 값이 나오며 Hello JavaScript!! 요소라면 양수 값이 나올 것 입니다.

프로그래밍에서 화면 좌표값은 화면 왼쪽 끝을 기준으로 (0,0)

X값은 오른쪽 방향이 양의 값, 왼쪽 방향이 음의 값이며

Y값은 아래방향이 양의 값, 위 방향의 음의 값입니다.

부모 요소의 시작지점 기준

조금 복잡합니다. 그 이유는 부모가 포지셔닝 정책이 무엇이냐가 중요합니다. 만약 부모가 position: relative 정책이라면, 부모 요소안의 자식 요소의 상대위치는 offsetTop API를 사용하면 됩니다. 하지만, 부모의 포지셔닝이 relative가 아니라면, 해당 API는 부모 요소기준이 아닌 상위 요소의 포지셔닝을 계속 탐색하여 relative가 있는 부모를 기준으로 좌표값을 계산합니다. 만약 자식 요소의 상위 요소들이 전부 relative 포지셔닝이 아니라면, 결국 offsetTop API는 컨텐츠의 시작지점 즉, 절대위치의 값을 리턴하게 됩니다.

정리하자면 offset API 시리즈는 부모의 포지셔닝 정책에 따라 절대좌표 or 상대좌표가 나올 수 있으므로, 조심해서 써야 합니다.

offset API 시리즈는 offsetTop, offsetLeft, offsetWidth, offsetHeight 등이 있습니다.

그래서 부모 요소를 기준으로한 상대 위치는 부모 요소의 절대 위치를 구한 후, 자식 요소의 절대위치를 구해 두 값의 연산을 통해, 구하는 것이 가장 안전한 방법이라 할 수 있습니다.

그 방법은 아래의 자바스크립트로 절대좌표 구하기 섹션을 먼저 진행 한 후, 마지막 섹션의 예시로 설명 할 예정입니다.

 

자바스크립트로 절대좌표 구하기

대부분 offset API로 절대좌표를 구합니다. 하지만, 위에서 설명했드시 해당 요소의 상위 요소중 하나라도 포지셔닝이 relative면 offset API는 절대좌표가 아닌 relative한 부모 요소의 상대좌표값이 구해집니다.

따라서, 안전하게 절대좌표를 구하는 방법을 소개할까 합니다.

어떤 아이디어로?

위에서 소개한 Viewport 의 시작 지점을 통한 상대좌표를 이용할 예정입니다. 만약 Hello World!!의 절대좌표를 구한다고 한다면, 1번 길이를 구해야 합니다. 1번 길이는 아래와 같이 구할 수 있습니다.

1번 길이 = 3번길이 - 2번길이

즉, 스크롤된 컨텐츠의 길이와 Hello World!!의 Viewport 상대좌표를 연산하여 구하는 것입니다.

이해를 하셨다면 아래의 코드 예시를 참고해주세요.

const target = document.getElementById('target'); // 요소의 id 값이 target이라 가정
​
const clientRect = target.getBoundingClientRect(); // DomRect 구하기 (각종 좌표값이 들어있는 객체)
const relativeTop = clientRect.top; // Viewport의 시작지점을 기준으로한 상대좌표 Y 값.
​
const scrolledTopLength = window.pageYOffset; // 스크롤된 길이
//const scrolledTopLength = pageYOffset; // window 객체 없이 pageYOffset 메서드를 써도 가능하다.
const absoluteTop = scrolledTopLength + relativeTop; // 절대좌표

 

자바스크립트로 안전하게 절대좌표 와 상대좌표를 구하는 예시

상황마다 값이 다르게 나오는 코드 보다는 추가적인 계산을 좀더 하더라도 안전하게 값을 구할 수 있는 코드를 원할때가 있습니다. 위의 설명을 토대로, 상황에 상관없이 안전하게 값을 구할 수 있는 예시로 정리해봤습니다.

1. 요소의 절대좌표 구하기. const absoluteTop = window.pageYOffset + element.getBoundingClientRect().top;2. Viewport의 시작지점을 기준으로한 상대좌표const relativeTop = element.getBoundingClientRect().top;3. 부모요소의 시작지점을 기준으로한 상대좌표// 1번에서 안내한 절대좌표 구하는 방법을 함수로 구현
function getAbsoluteTop(element) {
   return window.pageYOffset + element.getBoundingClientRect().top;
}
​
const parentElement = element.parentElement;
const parentAbsoluteTop = getAbsoluteTop(parentElement);
const absoulteTop = getAbsoluteTop(element);
​
const relativeTop = absoluteTop - parentAbsoluteTop;

출처: https://mommoo.tistory.com/85 [개발자로 홀로 서기]