DOM 요소의 위치 확인하기(getBoundingClientRect())

✒️ 2025-05-08 01:02 내용 수정

참고 자료 : mdn web docs Element getBoundingClientRect

• Element.getBoundingClinetRect() : DOMRect 객체의 viewport에 대한 상대적인 위치와 크기 정보를 반환한다.
• DOMRect : 전체 요소를 포함하는 가장 작은 사각형 객체이며, padding과 border-width를 포함한다.
• 전체 길이 단위는 px 단위다.
• 만약 빈 border-box 요소에 getBoundingClientRect()를 호출하면 width와 height는 0으로 반환되고, top과 left는 border-box의 왼쪽 상단 위치로 나온다.

<!-- test.html -->
<div class="container"></div>

/* css */
/* html과 body의 margin과 padding 제거 */
* {
	margin: 0; padding: 0;
}

/* container */
.container {
	padding: 30px;
	margin: 20px auto;
	width: 300px;
	height: 150px;
	background: orange;
}

// script
const container = document.querySelector(".container");
const info = container.getBoundingClientRect();
console.log(info);

• box-sizing : border-box를 설정하면 width와 heigth는 해당 요소의 width와 heigth값과 동일하다.

/* container */
.container {
	box-sizing: border-box;
	padding: 30px;
	margin: 20px auto;
	width: 300px;
	height: 150px;
	background: orange;
}

스크롤 시의 위치 정보

• viewport 영역이나 스크롤이 가능한 영역에서 스크롤을 했다면 getBoundingClientRect()에서 스크롤한 정도도 계산된다.
  • top, right, bottom, left는 스크롤로 위치가 바뀔 때마다 값이 바뀐다.

* {
    margin: 0; padding: 0;
}

/* body를 길게 만들어 스크롤 생성하기 */
body {
    height: 200vh;
}

.container {
    box-sizing: border-box;
	padding: 30px;
	margin: 20px auto;
	width: 300px;
	height: 150px;
	background: orange;
}

• console.log()를 보면 top/y = -80, bottom = 70으로 스크롤 된 viewport 기준으로 위쪽에 해당 요소가 있음을 확인할 수 있다.

• 만약 요소를 감싸는 사각형을 문서의 top-left 위치에 상대적으로 고정시키고 싶다면 window.scrollY와 window.scrollX를 top과 left에 더하면 된다.

// script
const container = document.querySelector(".container");
const info = container.getBoundingClientRect();

// 문서의 top-left 기준으로 박스 위치를 지정
let bounding_left = info.left + window.scrollX;
let bounding_top = info.top + window.scrollY;