[에러 일지] 'IntersectionObserver': rootMargin must be specified in pixels or percent...

IntersectionObserver을 사용해 스크롤 인터렉션을 구현하던 중 에러가 발생했다.
IntersectionObserver 인스턴스에 options를 지정하면 발생했고, 지정하지 않으면 정상적으로 작동했다.

🚫 Uncaught DOMException: Failed to construct 'IntersectionObserver': rootMargin must be specified in pixels or percent...

options의 rootMargin은 픽셀이나 퍼센트로 줘야 하는데 그러지 않아서 에러가 발생했다는데... 아무리 봐도 잘 작성한 것 같았다.

const observer = () => {
  const options = {
    root: null,
    rootMargin: '10px 0 -20px 0', // 여기
    threshold: 0.5
  }

  const io = new IntersectionObserver((entries, observer) => {
    entries.forEach((entry) => {
      if (entry.intersectionRatio > 0) {
        entry.target.classList.add("active");
      }
      else {
        entry.target.classList.remove("active");
      }
    });
  }, options);

  for (let i = 0; i < itemRef.current.length; i++) {
    io.observe(itemRef.current[i]);
  }
}

해결 방법

어이없게도 0에 단위를 적어주지 않아서 문제가 된 것이었다. 0이어도 꼭 단위를 적어주자.

기존

const options = {
  root: null,
  rootMargin: '10px 0 -20px 0', // X
  threshold: 0.5
}

변경

const options = {
  root: null,
  rootMargin: '10px 0px -20px 0px', // O
  threshold: 0.5
}