Resize Observer API

Yuri Na·2021년 3월 13일
0

Web API

목록 보기
3/4
post-custom-banner

https://yrnana.dev/post/2021-03-14-resize-observer-api

Resize Observer API는 요소의 크기 변화를 감지하고 콜백을 실행한다. 기존에는 Viewport 크기 변화는 windowresize 이벤트 또는 window.matchMedia로 감지할 수 있지만 요소의 크기 변화를 직접적으로 감지할 수 있는 방법은 없었다. 이 API를 이용하면 브라우저 크기 변화에 의존하지 않고 요소의 크기 변화를 직접적으로 관찰하고 대응할 수 있다.

Resize Observer 생성 및 적용

const targetElement = document.querySelector('#target')
const observer = new ResizeObserver((entries) => {
  entries.forEach((entry) => {
    // borderBoxSize, contentBoxSize
  })
})
observer.observe(targetElement)

contentBoxSizeborderBoxSize에서 paddingborder를 뺀 값이다.

호환성


아직 호환성이 많이 아쉬운 API다. 특히 ios safari 기준 13.7(2020년 이후 업데이트) 이상이어야 대응하므로 사용에 주의가 필요하다.

참고

profile
Frontend Developer@Kakaopay | https://yrnana.dev
post-custom-banner

0개의 댓글