IntersectionObserver.observe()

The IntersectionObserver observe() 메서드는 IntersectionObserver 객체가 관찰할 엘리먼트 목록에 단일 엘리먼트를 추가합니다. 하나의 옵저버 객체는 단일한 threshold와 root를 가지지만 복수의 타겟 엘리먼트의 가시성 변화를 관찰할 수 있습니다. 만일 엘리먼트 관찰을 중지하고 싶다면 IntersectionObserver.unobserve() (en-US) 메서드를 호출하세요.

특정 엘리먼트의 가시성이 다른 옵저버의 가시성 threshold와 교차할 때(IntersectionObserver.thresholds (en-US) 참조), 옵저버 콜백은 발생한 교차성 변경을 알리는 IntersectionObserverEntry (en-US) 객체와 함께 실행됩니다.

노트. 이 디자인은 복수 엘리먼트의 교차성 변경이 하나의 콜백 실행을 통해 처리되는 것을 허용합니다.

IntersectionObserver.observe(targetElement);

targetElement

가시성이 감시될 root 내부의 element. 해당 엘리먼트는 루트 엘리먼트의 자손 노드여야 합니다(혹은 현재 root가 document의 viewport일 때는 현재 document 내부의 엘리먼트여야 합니다).

undefined.

IntersectionObserver 를 등록한다

// IntersectionObserver 를 등록한다.
const io = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    // 관찰 대상이 viewport 안에 들어온 경우 'tada' 클래스를 추가
    if (entry.intersectionRatio > 0) {
      entry.target.classList.add('tada');
    }
    // 그 외의 경우 'tada' 클래스 제거
    else {
      entry.target.classList.remove('tada');
    }
  })
})

// 관찰할 대상을 선언하고, 해당 속성을 관찰시킨다.
const boxElList = document.querySelectorAll('.box');
boxElList.forEach((el) => {
  io.observe(el);
})

• IntersectionObserver.unobserve() (en-US)