Intersection Observer이란

무한스크롤을 clientHeight, scrollTop, scrollHeight을 이용해서 구현 했는데 Intersection Observer을 이용해서 구현 할 수 있다.

뷰포트와 타깃 엘리먼트가 교차되는 부분을 비동기적으로 관찰하는 api다.

사용이유

scroll 이벤트는 성능에 악영향을 줄 수 있다.
1. debounce, throttle을 사용하지 않아도 된다.
2. reflow를 하지 않는다
스크롤 이벤트에서 offsetTop 매번 layout을 새로 그린다.즉 랜더 트리를 다시 그린다. 성능이 저하된다. 또 스크롤 이벤트는 동기적을 실행되기 때문에 메인 스레드에 큰 부하를 줄 수 있다. Intersection Observer는 비동기적으로 실행되어 reflow를 발생시키지 않는다.
3. IE를 제외하면 대부분의 브라우저에서 지원된다.

사용법

const io = new IntersectionObserver(callback, options) // 관찰자 초기화
io.observe(element) // 관찰할 대상(요소) 등록

생성자는 2개의 인수(callback, options)를 가진다.

callback

const io = new IntersectionObserver((entries, observer) => {}, options)
io.observe(element)

관찰할 대상(Target)이 등록되거나 가시성(Visibility, 보이는지 보이지 않는지)에 변화가 생기면 관찰자는 콜백(Callback)을 실행합니다.
콜백은 2개의 인수(entries, observer)를 가집니다.

entries

IntersectionObserverEntry 인스턴스의 배열
읽기 전용(Read only)의 여러 속성들을 포함한ㄷ,

const io = new IntersectionObserver((entries, observer) => {
 entries.forEach(entry => {
   console.log(entry) // entry is 'IntersectionObserverEntry'
 })
}, options)

io.observe(element)

관찰 대상이 등록되거나 가시성에 변화가 생기면 콜백이 실행되면서 콜백함수 안에서 관찰대상의 정보들을 볼수 있따.

observer

콜백이 실행되는 해당 인스턴스를 참조합니다.

const io = new IntersectionObserver((entries, observer) => {
  console.log(observer)
}, options)

io.observe(element)

options

옵션에는 3가지 속성이 있따.

root

뷰포트 대신 사용할 root. null이면 뷰포트

rootMargin

바깥 여백(Margin)을 이용해 Root 범위를 확장하거나 축소
내가 생각 했을때 스크롤이 잇으면 뷰포트는 화면에 보이는 정도가 아닐까? 그래서 화면에 보이지 않는 부분까지 뷰포트를 확장하는 옵션인거 같다.

threshold

타겟의 가시성이 얼마나 필요한지 백분율로 표시
내가 생각했을때는 뷰포트에 타깃이 보일때 어느정도 보이면 실행될지.

출처

https://velog.io/@meganatc7/Intersection-Observer-%EB%9E%80
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
https://heropy.blog/2019/10/27/intersection-observer/