[JavaScript] 절대 좌표, 상대 좌표 구하기

 

HTML

<div class="box box1"></div>
<div class="box box2"></div>

 

CSS

html, body { margin: 0; padding: 0;  }
.box { width: 500px; height: 500px; position: absolute; }
.box1 { background-color: bisque; top: 1000px; left: 50%; transform: translateX(-50%); }
.box2 { background-color: brown; top: 3000px; left: 50%; transform: translateX(-50%); }

 

box1의 top은 페이지(문서) 기준으로 1000px이다.

하지만 내가 보고 있는 화면을 기준(viewport)으로 좌표를 측정한다면 0px이 될 수도 있고 -1000px이 될 수도 있다.

 

 

1. 상대 좌표

의외로 절대 좌표보다 상대 좌표를 구하는 것이 더 쉽다.

// 상대 좌표 구하기
let element1 = document.querySelector('.box1');
let elementTop1 = element1.getBoundingClientRect().top;
console.log(elementTop1); // 현재 화면의 위치에 따라 값이 달라진다 ex)1000, 200, -1000 등...

 

2. 절대 좌표

절대 좌표는 위에서 사용한 getBoundingClientRect()와 함께 pageYOffset(혹은 pageXOffset)을 사용한다.

 

 

 

즉 현재 화면으로부터 요소의 거리 + 화면을 스크롤한 거리이다.

// 절대 좌표 구하기
let element2 = document.querySelector('.box1');
let elementTop2 = window.pageYOffset + element2.getBoundingClientRect().top;
console.log(elementTop2) // 1000

 

3. 다른 요소로부터 좌표

box1으로부터 box2가 얼마나 떨어져 있는지 구하고 싶다면 box1의 절대 좌표를 구해서 box2의 절대 좌표에서 그 값을 빼면 된다.

// 다른 요소로부터 좌표 구하기
let element3 = document.querySelector('.box1');
let target = document.querySelector('.box2');
let elementTop3 = window.pageYOffset + element3.getBoundingClientRect().top;
let targetTop = window.pageYOffset + target.getBoundingClientRect().top;
console.log(targetTop - elementTop3);

 

 

4. 제이쿼리(jQuery)

// 절대 좌표 구하기
let position1 = $('.box1').offset().top;
console.log(position1);

// 상대 좌표 구하기
let position2 = $(window).scrollTop();
console.log(position1 - position2);

// 다른 요소로부터 좌표 구하기
let position3 = $('.box2').offset().top - $('.box1').offset().top;
console.log(position3);