IntersectionObserver.observe()

Experimental

This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

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

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

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

문법

IntersectionObserver.observe(targetElement);

Parameters

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

Return value

undefined.

Examples

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);
})

BCD tables only load in the browser

Specification Status Comment
Intersection Observer
The definition of 'IntersectionObserver.observe()' in that specification.
Working Draft Initial definition.

See also