문서 내에서 렌더링 된 엘리먼트의 절대 위치 가져오기

발생일: 2015.01.16

키워드: getClientRects, getBoundingClientRect

내용:

문서 내에서 렌더링 된 엘리먼트의 절대 위치를 계산해야 한다면,

getClientRects() 와 getBoundingClientRect() 메서드를 사용해 윈도우 기준으로 렌더링 된 위치를 가져온 후에,

문서의 스크롤 값을 더해주면 된다.

element.getClientRects()

엘리먼트를 감싸고 있는 박스들의 크기를 가져온다.

각 태그마다 박스가 다르다. 예를 들면, 줄바꿈이 있는 엘리먼트나, 기본 리스트 스타일이 적용된 li 태그 등이 그렇다.

마진을 제외하고, 엘리먼트를 감싸고 있는 박스의 위치와 크기를 가져온다. (보더와 패딩을 포함한 크기)

아래 이미지를 보면 이해하기 쉽다.

빨간 보더가 clientRects 의 응답을 의미한다.

https://developer.mozilla.org/en-US/docs/Web/API/element.getClientRects

element.getBoundingClientRect()

엘리먼트의 각 clientRects 그룹을 감싸는 박스의 크기를 가져온다.

getClientRects() 에서 가져온 값들을 감싸는 크기라고 생각해도 좋다.

엘리먼트의 절대 위치 가져오기

clientRect 는 윈도우에서의 상대적인 위치이기 때문에,

특정 엘리먼트의 정확한 offset()을 가져오려면 윈도우의 스크롤 된 위치를 가져와야 한다.

스크롤이 얼마나 되었는지는 `window.pageYOffset` 또는 `window.scrollY` 속성으로 가져올 수 있다.

`window.pageYOffset` 과 `window.scrollY`는 이름만 다를 뿐 동일하다.

실제로

    window.scrollY === window.pageYOffset; //—> true

이기도 하다.

다만, 다른 브라우저와의 호환성을 위해 `scrollY` 대신 `pageYOffset`을 사용할 것을 권장한다.

IE9 이하는 두 속성 모두 제공하지 않기 때문에, `scrollTop` 속성을 확인해야 한다.

IE9 이하에서는 html 엘리먼트나 body 의  scrollTop 속성으로 확인해야 한다.

`element.scrollTop` 속성은 해당 엘리먼트가 보이는 영역 내에서 얼마나 스크롤 되었는지를 확인한다. (예: overflow 가 적용된 엘리먼트)

정확한 스크롤 위치는 아래 코드 스니핏을 참고하면 된다.

var supportPageOffset = window.pageXOffset !== undefined;

var isCSS1Compat = ((document.compatMode || "") === "CSS1Compat");

var x = supportPageOffset ? window.pageXOffset : isCSS1Compat ? document.documentElement.scrollLeft : document.body.scrollLeft;

var y = supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop;