Intersection Observer API는 상위 요소 또는 최상위 문서의 뷰포트(viewport)와 대상 요소 사이의 변화를 비동기적으로 관찰할 수 있는 수단을 제공한다.
웹은 기본적으로 콘텐츠가 뷰포트 또는 특정 래퍼 요소 내에서 스크롤이라는 방식으로 화면에 표시된다. 화면에 보이고 안보이는 시점에 대한 처리는 과거에는 특별하게 취급되지 않았지만 오늘날에는 웹의 성능과 데이터 사용 측면에서 매우 중요한 문제로 인식되게 되었다. 또한 시각적 효과를 주기 위해서 스크롤 타이밍을 활용하는 사례는 빈번해지고 있다. 다음의 경우는 일반적으로 가시적인 시점과 비가시적인 시점을 활용하는 예라고 할 수 있다.
이러한 이유로 특정 요소에 대한 문서 내 위치 계산이 필요할 때가 많은 데 기존 메커니즘은 비용이 많이 드는 리플로우(reflow), 리페인팅(repainting)을 유발하는 것으로 알려진 DOM 상태의 명시적 쿼리에 의존하고 있었다. 때에 따라서는 지속적인 폴링(polling, 예: scroll 이벤트)으로 인한 상당한 성능 오버헤드(overhead)의 원인이 되기도 했다.
이와 같은 기술적인 관행은 계속되어 근본적인 변화없이 발전, 남용되어 왔으나 오늘날의 복잡한 웹 처리 요구를 따라 가기에는 역부족이었다. 점점 거대해지는 DOM이 시시각각 업데이트되고 그에 따른 부차적인 처리 등등이 웹프로그래밍의 핵심 패턴으로 자리잡고 있는 현대의 웹에서는 획기적인 메커니즘을 제시할 필요가 있게 되었다. 이에 따라 Intersection Observer API가 등장하게 되었고 완성도를 떠나 적어도 방향성을 제대로 갖게 되었다. 근본적으로 비용이 많이 드는 처리를 요구하지 않으므로 시스템의 CPU, GPU 및 에너지 사용 효율을 가져오게 되었다.
지정된 루트(root) 내에서 설정된 가시성 비율이 자신의 주시 대상 중에서 나타나는지 감지하는 수단을 제공한다.
객체의 인스턴스(instance)를 생성하기 위한 생성자 함수를 지원한다.
새로운 IntersectionObserver 객체를 생성한다.
관찰 대상의 요소를 포함하는 컨테이너(루트)의 실제 교차 사각형 영역을 나타낸다.
관찰 대상 요소가 가시적인 범위 내에 보여지는 비율인 임계값을 나타낸다.
관찰자의 모든 가시성 변화 감지 대상을 해제한다.
가시성 관찰 대상으로 요소를 추가한다.
마지막 교차 알림(명시적 takeRecords() 메소드 호출 또는 감지에 따라 자동 콜백 함수 호출) 이후 교차 영역에 변화가 생긴 요소들의 집합을 반환한다.
지정된 요소를 관찰 대상에서 제거한다.
가시성 전환이 발생하는 순간에 대상 요소와 루트 컨테이너 사이의 교차점을 설명한다.
직접적인 생성자는 없으며 관찰자에 의해서 가시성 변경이 관찰되면 콜백 함수에게 전달되거나 IntersectionObserver.prototype.takeRecords() 메소드에 의해 반환받는다.
감지 대상 요소를 포함하는 사각형을 설명하는 DOMRectReadOnly 객체를 반환한다.
가시성 감시 대상 요소가 가시성 변화가 감지될 때 현재 루트 교차로 비율 내에서 0.0에서 1.0 사이의 값으로 얼마나 많이 보이는지를 조회한다.
현재 교차되는 투르 내에서 볼 수 있는 대상 요소의 전체 부분을 포함하는 가장 작은 사각형을 설명하는 DOMRectReadOnly 객체를 참조한다.
가시성 감시 대상 요소가 루트와 교차여부를 나타낸다.
루트 교차 사각형에 해당하는 DOMRectReadOnly 객체를 참조한다.
어떤 가시성 감시 대상 요소가 루트와 교차 정도를 변경했는지 나타낸다.
문서가 생성된 시간을 기준으로 교차 변경이 발생한 시간을 나타내는 DOMHighResTimeStamp 객체를 나타낸다.
