[JS] intersection observer API

📍참고 링크

https://developer.mozilla.org/ko/docs/Web/API/Intersection_Observer_API

Intersection Observer API - Web API | MDN

 

📍intersection observer API 이란?

✅특정 element가 다른 element(거의 viewport로 생각하면 됨) 와 일정 부분 겹칠 때를 감지하고, 이벤트 핸들러를 등록 가능

1. observe할 element 선택

2. 이 element가 viewport (또는 다른 element)와 겹치면,

(예시)

- viewport에 들어갈 때

- viewport에서 나갈 때

- 두 element의 교차 부분(설정 가능)이 변경될 때

3. 이러한 이벤트가 발생할 때마다 실행될 콜백 함수 등록 가능

 

✅무한스크롤 등에 활용

 

- 예시

 

// intersection observer API
const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      entry.target.classList.add("show");
    } else {
      entry.target.classList.remove("show");
    }
  });
});

const hiddenElements = document.querySelectorAll(".hidden");
hiddenElements.forEach((el) => observer.observe(el));

 

observe 할 타겟 element들이 뷰포트에 들어오면 show 클래스를 추가하고,

뷰포트에서 나가면 show 클래스를 제거

 

그리고 hidden 클래스가 show 클래스를 가지게 될 때 애니메이션 효과를 주면 된다