요소의 크기 변화를 감지하는 ResizeObserver

ResizeObserver는 자바스크립트에 기본적으로 내장된 API이다.

 

Window.addEventListener의 'resize' 와는 다르다.

 

Window의 resize 이벤트는 브라우저의 크기 변화를 감지하고

 

ResizeObserver 는 브라우저가 아닌 특정 요소자체의 크기 변화를 감지한다.

(물론 브라우저의 크기 변화도 감지할 수 있다.)

 

브라우저의 크기는 변하지 않았지만, LNB 메뉴가 펼쳐질때 메인 컨텐츠 부분이 줄어든다던가 할때 유용하다.

 

사용법을 알아보자.

 

let box_observer = new ResizeObserver(entries => {
  for (let entry of entries) {
    // 감시 대상의 크기가 변화했을 때 실행할 코드
    console.log('사이즈 변했음!');
  }
});

 

일단 ResizeObserver를 new 메서드로 생성해준다.

 

let box_observer = new ResizeObserver(entries => {
  for (let entry of entries) {
    const cr = entry.contentRect; // 감시 대상의 사이즈 정보를 가지고있는 객체
    console.log(`Target : ${entry.target}`); // 감시 대상
    console.log(`Width : ${cr.width}, Height : ${cr.height}`); //감시대상의 너비와 높이
    console.log(`Padding Top & Left : ${cr.top}, ${cr.left}`); //감시대상의 padding
    
    if(cr.width < 1200){
    	alert('사이즈 1200 이하!');
    }
  }
});

contentRect를 사용하면 요소의 크기 정보를 받을 수 있다.

 

예시에서는 요소의 크기가 변할 때마다 콘솔에 정보가 찍힌다.

 

If 문을 사용해서 너비가 일정 픽셀 이하가 될 경우 alert를 띄우도록 로직을 구현해보았다.

 

const box = document.querySelector('.box');

box_observer.observe(box);

 

그리고 생성한 ResizeObserver에 observe 메서드를 이용하여 감시대상을 정해주면 끝!

 

요소의 너비가 1200px 이하가 되면 alert 창이 뜨는것을 확인할 수 있다.