Intersection Observer API

Intersection Observer?

scroll이벤트는 이벤트가 동기적으로 실행되기때문에  짧은 시간에 많은 콜백이 일어나면서 메인 스레드에 큰 부하를 준다.
Intersection Obsever은 비동기적으로 실행되기때문에 reflow를 발생시키지 않기때문에 성능 상에서 유리하다.

사용방법

Intersection Obsever 인스턴스를 생성

let options = {
	root: document.querySelector('#scrollArea'),
	rootMargin: '0px',
    threshold: 1.0
}

// options에 따라 인스턴스 생성
let io = new IntersectionObserver(callback, options); //관찰자 초기화

// 타겟 요소 관찰 시작
let target = document.querySelector('#listItem');
io.observe(target); //관찰할 대상 등록

new 키워드를 통해 인스턴스 생성한다

callback, options 2개의 파라미터를 받는다

• callback은 가시성의 변화가 생겼을때 호출되는 콜백 로직
• options는 만들어질 인스턴스에서 콜백이 호출되는 상황을 정의

만약 더이상 타겟요소를 구독할 필요가 없다면 unobserve로 제거 할 수 있다

Callback

관찰할 대상(Target)이 등록되거나 가시성에 변화가 생가면 관찰자는 콜백을 실행

콜백은 2개의 인수(entries, observer)을 가진다

Options

root 

타겟요소의 가시성을 확인할 때 사용되는 루트요소

이것은 타켓요소보다 상위요소이여야 한다

root값을 null로 주었을때 기본값은 브라우저 뷰포트로 설정된다

rootMargin

margin값을 주어 루트요소의 범위를 확장할 수 있다

즉, 확장된 영역 안에 타겟 요소가 들어가면 가시성에 변화가 생긴다

기본값은 0이며 설정 시 단위(px, %)를 꼭 입력해야한다

threshold

콜백이 실행 될 타겟요소의 가시성 퍼센트를 나타내는 단일 숫자 및 배열이 들어갈 수 있다

즉, 어느정도 타겟요소가 보여졌는지에 따라서 콜백을 호출할 수 있다

root번위를 교차 하는 순간 보여지고 싶다면 단일 숫자값 0

50%가 보여졌을때 탐지하고 싶다면 단일 숫자값 0.5

25%단위로 가시성이 변경 될 때마다 콜백이 실행되게 하고싶다면 [0, 0.25, 0.5, 0.75, 1]

Methods

observe()

대상요소의 관찰을 시작

unobserve()

대상요소의 관찰을 중지

관찰을 중지할 하나의 대상요소를 인수로 지정

1회 실행 후 관찰 중지하는 방법

const io1 = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    // 가시성의 변화가 있으면 관찰 대상 전체에 대한 콜백이 실행되므로,
    // 관찰 대상의 교차 상태가 false일(보이지 않는) 경우 실행하지 않음.
    if (!entry.isIntersecting) {
      return
    }
    // 관찰 대상의 교차 상태가 true일(보이는) 경우 실행.
    // ...

    // 위 실행을 처리하고(1회) 관찰 중지
    observer.unobserve(entry.target)
  })
}, options)

disconnect()

Intersection Obsever가 관찰하는 모든 요소의 관찰 중지

takeRecords()

Intersection ObseverEntry인스턴스의 배열을 반환

Entries

entries는 Intersection ObseverEntry의 인스턴스 배열

콜백에 파라미터로 전달된다

Intersection ObseverEntry에 포함된 프로퍼티들은 모두 읽기전용(readonly)이다

프로퍼티 종류

• target : 관찰 대상 요소 (Element)

• time : 변경이 발생한 시간 정보(DOMHighResTimeStamp)

• rootBounds : 지정한 루트 요소의 사각형 정보(DOMRectReadOnly)

• boundingClientRect : 관찰 대상의 사각형 정보(DOMRectReadOnly)

• intersectionRect : 관찰 대상의 교차한 영역 정보(DOMRectReadOnly)

• intersectionRatio : 관찰 대상의 교차한 영역 백분율(intersectionRect 영역에서 boundingClientRect  영역까지의 비율, Number)

• isIntersecting : 관찰 대상의 교차 상태(Boolean)

IE지원(polyfill)

polyfill은 IE7까지 사용가능
모듈 사용

$ npm i intersection-observer

전역으로 사용

<script src="https://polyfill.io/v3/polyfill.min.js?features=IntersectionObserver"></script>

참고자료
https://developer.mozilla.org/ko/docs/Web/API/Intersection_Observer_API
https://pks2974.medium.com/intersection-observer-%EA%B0%84%EB%8B%A8-%EC%A0%95%EB%A6%AC%ED%95%98%EA%B8%B0-fc24789799a3
https://heropy.blog/2019/10/27/intersection-observer/
https://velog.io/@elrion018/%EC%8B%A4%EB%AC%B4%EC%97%90%EC%84%9C-%EB%8A%90%EB%82%80-%EC%A0%90%EC%9D%84-%EA%B3%81%EB%93%A4%EC%9D%B8-Intersection-Observer-API-%EC%A0%95%EB%A6%AC