Intersection Observer API

교차 관찰자는 기본적으로 관찰 중인 요소(Element)가 뷰포트(Viewport)와 교차하고 있는지를 감지하는 API인데, 관찰 중인 요소가 사용자가 보는 화면 영역 내에 들어왔는지를 알려주는 API

entries
관찰 대상의 여러 정보들이 배열로 담겨져 있다.
- boundingClientRect: 관찰 대상의 사각형 정보(DOMRectReadOnly)
- intersectionRect: 관찰 대상의 교차한 영역 정보(DOMRectReadOnly)
- intersectionRatio: 관찰 대상의 교차한 영역 백분율(intersectionRect 영역에서 boundingClientRect 영역까지 비율, Number)
- isIntersecting: 관찰 대상의 교차 상태(Boolean)
- rootBounds: 지정한 루트 요소의 사각형 정보(DOMRectReadOnly)
- target: 관찰 대상 요소(Element)
- time: 변경이 발생한 시간 정보(DOMHighResTimeStamp)

var options = {
  // root: document.querySelector('.container'), // .container class를 가진 엘리먼트를 root로 설정. null일 경우 브라우저 viewport
  // rootMargin: '10px', // rootMargin을 '10px 10px 10px 10px'로 설정
  // 관찰 대상이 화면 내의 위치
  threshold: [0, 0.3, 1] // 타겟 엘리먼트가 교차영역에 진입했을 때, 교차영역에 타켓 엘리먼트의 30%가 있을 때, 교차 영역에 타켓 엘리먼트의 100%가 있을 때 observe가 반응한다.
}

// Observer 선언
var io = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    // 화면 안에 요소가 들어왔는지 체크
    if (entry.intersectionRatio > .2) {
    // 노출된 비율 20% 보다 클때 클래스 추가
      entry.target.classList.add('active');
    } else {
      entry.target.classList.remove('active');
    }
  })
}, options);

// Observer 대상
var sectionElList = document.querySelectorAll('.section');
sectionElList.forEach((el) => {
  io.observe(el);
});

scroll 이벤트 말고 이제 Observer 를 쓰자

지원
https://caniuse.com/?search=Intersection%20Observer