[JS] Element 크기 변화 감지 (ResizeObserver)

window창은 resize 이벤트를 이용해서 창 크기 변화를 감지할 수 있습니다. 하지만 div, p와 같은 HTML 태그들은 resize 이벤트에 해당하지 않습니다.

 

ResizeObserver API

const $target = document.querySelector('div');

const observer = new ResizeObserver((entries) => {
  // 관찰 중인 배열 형식의 객체 리스트
  entries.forEach((entry) => {
    ...
  });
});

// 크기변화를 관찰할 요소지정
observer.observe($target);

Resize Observer API는 resize 이벤트와 다르게 설정한 요소의 크기 변화를 관찰하며, 크기가 변경될 때마다 관찰자에게 정보를 전달합니다.

 

Callback

const observer = new ResizeObserver((entries, observer) => {
  // 관찰 중인 배열 형식의 객체 리스트
  entries.forEach((entry) => {
    ...
  });
});

observe 메서드로 등록한 요소의 크기가 변할 때, ResizeObserver Callback 함수에 값이 담겨옵니다.

• Entries
  • 관찰되고 있는 ResizeObserverEntry 데이터 리스트를 반환
• Observer
  • 콜백 함수가 호출되는 ResizeObserver의 참조 객체

 

Entry Object

Entries - 객체 리스트의 각 Entry 객체는 아래와 같이 구성되어 있습니다.

• contentBoxSize
  • 관찰된 요소의 테두리 상자 크기 객체 (content)
• borderBoxSize
  • 관찰된 요소의 테두리 상자 크기 객체 (content + padding + border)
• contentRect
  • 위 두 BoxSize보다 많은 정보를 담고 있는 객체입니다. 하지만 그에 따른 웹 호환성 문제로 작동하지 않을 수도 있습니다. (BoxSize)
• devicePixelContentBoxSize
  • 관찰된 요소의 테두리 상자 크기 객체
• target
  • 관찰되는 대상 요소(Element, SVGElement)

 

unobserver()

observer.unobserver($target);

특정 대상에 대한 크기 관찰을 해제할 수 있습니다.

 

disconnect()

observer.disconnect();

모든 대상을 대상으로 크기 관찰이 해제됩니다.

 

예시 코드