IntersectionObserver API란

타겟 엘리멘트가 화면(viewport)에 보여지고 있는지 관찰하는 API

• 현재 대부분의 모던 브라우저에서 지원

  

  https://cross-code.github.io/posts/IntersectionObserver/

사용법

기본 구문

const io = new IntersectionObserver(callback, options); // 관찰자 초기화

const target = document.querySelector('.target')
io.observe(target); // 관찰할 대상(요소) 등록

매개변수

callback

• 대상 요소의 보이는 영역 비율이 역치 값을 넘는 경우 호출되는 함수
• entries, observer 두 개의 매개변수를 받음
  • entries : 더 드러나거나 가려져서 지정한 역치를 넘어가게 된 요소를 나타내는 IntersectionObserverEntry 객체의 배열
  • observer : 콜백을 호출한 IntersectionObserver

options

• 감지기를 조절할 수 있는 객체로, 지정하지 않으면 문서 뷰 포트를 root로, 여백 없이, 0% 역치로 설정(하나의 픽셀이라도 보일 경우 콜백이 호출됨)
• root, rootMargin, threshold가 있음
  • root : 대상 요소의 조상 Element (기본값은 null 로, Document가 root로 설정됨)
  • rootMargin : root 영역의 크기를 키우거나 줄이고자 할 때 사용
  • threshold : 대상이 화면에 표시되는 비율(역치)로, 이 값을 지정하여 대상이 어느정도 노출될 때 보이는 것으로 판단

인스턴스 메서드

• observe(*targetElement*): 타겟 엘리먼트에 대한 관찰을 등록
• unobserve(*targetElement*): 타겟 엘리먼트에 대한 관찰을 정지
• disconnect(): 다수의 엘리먼트를 관찰하고 있을 때, 이에 대한 모든 관찰 정지
• takeRecords(): 관찰 중인 엘리먼트의 IntersectionObserverEntry 객체를 배열로 반환