[javascript] offset 절대 위치 구하기

const offsetEle = document.querySelector('.con-box');
const offsetEleY = offsetEle.getBoundingClientRect().top;
const offsetEleAbsolTop = window.pageYOffset + offsetEleY;

javascript 의 getBoundingClientRect() 내장 함수로 대상의 절대 위치를 구할 수 있다. 

콘솔 출력 결과 left, top, bottom, x, y 등 해당 엘리먼트의 절대 위치를 확인 하여 원하는 값을 추출 가능 하다.

 

offset() 함수의 경우 가까운 부모의 기준으로 상대경로를 구하는 성격을 띄는데, 이는 만약 컨텐츠 중에 텝 스타일이 있는 텝의 컨텐츠의 높이가 유연하게 움직일 경우나, 부모 요소중에 relative 스타일을 갖는다면 정확하지 않은 값을 가져올 수 있다. 즉, offset() 함수는 중간 컨텐츠들이 변수가 생기는 경우가 많을 경우에는 정확도가 떨어진다는 이야기다.

 

스크롤로 이동한 거리(window.pageYOffset) + 현재화면 기준으로한 상대경로 값(offsetEleY)을 합한 값으로 절대경로를 구한다.