ResizeObserver : Element의 크기 변화 감지

ResizeObserver란?

이름 그대로 크기 변화를 관찰하는 역할을 한다.

어떤 element를 관찰하도록 설정하면 해당 element의 크기가 변화했을 때 콜백 함수를 호출한다.

 

 

Constructor

ResizeObserver 객체를 반환한다.

let resizeObserver = new ResizeObserver( callback( entries, observer));

• callback : element의 크기가 변경되면 호출되는 함수
• entries : element의 변경된 치수에 접근할 수 있는 ResizeObserverEntry 객체 배열
• observer : resizeObserver 객체 그 자체. 콜백 함수 내에서 unobserver하는 등의 필요한 경우에 선택적으로 사용할 수 있다.

function callback(entries, observer) {
  for (const entry of entries) {
    // Do something to each entry
    // and possibly something to the observer itself
  }
}

 

ResizeObserverEntry

ResizeObserverEntry에는 크기 변경을 감지한 요소에 대한 정보가 들어있다.

• target : 크기 변경을 감지한 대상 요소
• contentRect : 변경된 사각 영역의 정보를 나타내는 DOMRectReadOnly 객체. width, height 등의 정보를 얻을 수 있다.

const observer = new ResizeObserver(entries => {
  for (const entry of entries) {
    const target = entry.target;
    const contentRect = entry.contentRect;

    console.log(`대상 요소: ${target}`);
    console.log(`너비: ${contentRect.width}px`);
    console.log(`높이: ${contentRect.height}px`);
  }
});

observer.observe(targetElement);

 

DOMRectReadOnly

DOM 요소의 사각 영역 정보를 나타내는 읽기 전용 객체이다.

• x: 사각 영역의 왼쪽 가장자리 좌표 (left와 동일)
• y: 사각 영역의 위쪽 가장자리 좌표 (top과 동일)
• left: 사각 영역의 왼쪽 가장자리 좌표
• top: 사각 영역의 위쪽 가장자리 좌표
• right: 사각 영역의 오른쪽 가장자리 좌표
• bottom: 사각 영역의 아래쪽 가장자리 좌표
• width: 사각 영역의 너비
• height: 사각 영역의 높이

일반 element에서는 .getBoundingClientRect()메소드로 DOMRectReadOnly 객체를 반환한다.

 

Instance Methods

ResizeObserver.disconnect()

모든 element를 unobserve하는 메소드

이 메소드 호출 이후에는 더 이상 콜백 함수가 실행되지 않는다.

btn.addEventListener("click", () => {
  resizeObserver.disconnect();
});

 

ResizeObserver.observe()

어떤 element를 observer에 등록하는 메소드

대상 요소의 사이즈 변화가 있는 경우, 등록된 콜백 함수가 실행된다.

resizeObserver.observe(element);

 

ResizeObserver.unobserve()

어떤 element를 unobserve하는 메소드

크기 감지를 해제한다.

resizeObserver.unobserve(element);

 

 

 

# 참조 자료

MDN Web Docs - ResizeObserver