[JS] intersectionObserve(): 화면에 요소가 보이거나 사라지는 순간을 감지

📌 IntersectionObserver 객체

: 웹 페이지에서 특정 요소가 화면에 보이거나 사라지는 것을 감지할 수 있는 도구

ex)  사용자가 페이지를 스크롤할 때 이미지가 화면에 나타나는 순간에만 그 이미지를 불러오게 하려는 상황에서 사용될 수 있다.

출처: https://codejs.co.kr/intersection-observer/

 

 

출처: https://codejs.co.kr/intersection-observer/

 

 

---

 

📌 intersectionObserve()

: 새로운 IntersectionObserver 객체를 생성, 반환

• 교차 관찰자 API
• 브라우저 뷰포트(Viewport)와 설정한 요소(Element)의 교차점을 관찰한다.
  ➡︎ 사용자 화면에 지금 보이는 요소인지( 요소가 뷰포트에 포함되는지)를 구별하는 기능을 제공한다.
• 사용 상황
  
  • 이미지나 동영상 로딩
    : 스크롤할 때, 이미지가 화면에 보이는 순간 이미지를 로딩하게 하고 싶을 때 사용된다.
    이를 통해 페이지 로딩 속도가 빨라진다.
  • 무한 스크롤 구현
    : 페이지 하단까지 스크롤할 때, 자동으로 새로운 콘텐츠를 불러오게 하고 싶을 때 유용하다.
  • 애니메이션 트리거
    : 특정 요소가 화면에 보이기 시작하는 순간 애니메이션을 실행하고 싶을 때 활용된다.
• 작동 과정
  
  • 옵저버(Observer) 생성|
    : 먼저 IntersectionObserver 객체를 생성한다.
    ➡︎ 이때, 화면에 요소가 나타나거나 사라질 때 호출될 콜백 함수와 몇 가지 옵션을 설정한다.
  • 타겟 요소 관찰 시작
    : observe() 메서드를 사용해 관찰하고자 하는 요소를 지정한다.
    ➡︎ 이렇게 하면 그 요소가 화면에 보이거나 사라질 때 콜백 함수가 호출된다.
  • 필요 시 옵저버 해제
    : 특정 요소의 관찰을 중단하거나, 옵저버 자체를 해제하고 싶을 때 unobserve() 또는 disconnect() 메서드를 사용하면 된다.

 

 

const observer = new IntersectionObserver(callback[, options]);

• 매개변수
  
  • callback
    : 대상 요소의 보이는 영역 비율이 역치를 위아래로 넘을 때 (더 커졌거나 작아졌을 때 모두) 호출하는 함수
    - 두 개의 매개변수를 받는다.
    
    • entries
      : observe() 메소드로 관찰하는 대상들, IntersectionObserverEntry 객체의 배열
      
      • IntersectionObserverEntry 객체의 속성
        - boundingClientRect
        : 관찰 대상의 사각형 정보(DOMRectReadOnly)
        - intersectionRect
        : 관찰 대상의 교차한 영역 정보(DOMRectReadOnly)
        - intersectionRatio
        : 관찰 대상의 교차한 영역 백분율(intersectionRect 영역에서 boundingClientRect 영역까지 비율, Number)
        - isIntersecting
        : 관찰 대상의 교차 상태(Boolean)
        - rootBounds
        : 지정한 루트 요소의 사각형 정보(DOMRectReadOnly)
        - target
        : 관찰 대상 요소(Element)
        - time
        : 변경이 발생한 시간 정보(DOMHighResTimeStamp)
    • observer
      : 콜백을 호출한 IntersectionObserver
  • options
    : 감지기를 조절할 수 있는 객체
    - 지정하지 않으면 문서 뷰포트를 루트로, 여백 없이, 0% 역치(하나의 픽셀이라도 보이면 콜백 호출)로 설정한다.
    
    • root
      : 대상 요소의 조상 Element 또는 Document
      - 여기에 지정한 요소 또는 문서의 바운딩 박스를 이 감지기의 뷰포트로 사용한다.
    • rootMargin
      : 교차 계산에 대해 루트의 바운딩 박스에 적용할 오프셋을 나타내는 문자열
      - 교차 계산 시 루트 영역의 크기를 키우거나 줄이고자 할 때 사용한다.
      - CSS margin 속성과 유사한 값을 받을 수 있다. 
      - 기본 값: "0px 0px 0px 0px"
    • threshold
      : 0.0 이상, 1.0 이하의 숫자 단일 값 또는 숫자 배열
      - 대상의 보이는 영역과 전체 바운딩 박스의 비율에 대한 역치
      - 0.0을 지정하면 대상의 픽셀 하나라도 보일 때 대상을 볼 수 있는 것으로 취급하고, 1.0을 지정하면 대상을 온전히 볼 수 있어야 한다.
      - 기본 값: 0.0
• 메서드
  
  • observe(targetElement)
    : 타겟 엘리먼트에 대한 관찰을 시작할 때 사용
  • unobserve(targetElement)
    : 타겟 엘리먼트에 대한 관찰을 멈출 때 사용
  • disconnect()
    : 다수의 엘리먼트를 관찰하고 있을 때, 이에 대한 모든 관찰을 멈추고 싶을 때 사용
  • takeRecords()
    : 관찰중인 엘리먼트의 IntersectionObserverEntry 객체를 배열로 반환

 

 

 

✅ 사용

1. 관찰자 초기화
   new IntersectionObserver(callback, options);
   
2. 관찰 대상 지정
   observe(element)

// 1. 관찰자 초기화
const io = new IntersectionObserver((entries, observer) => {}, options);

// 2. 관찰할 대상(요소) 등록
io.observe(element);

 

 

 

 

예제)

// 콜백 함수 정의
const callback = (entries, observer) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            // 요소가 화면에 보이기 시작하면 할 일
            console.log('요소가 보입니다!');
        } else {
            // 요소가 화면에서 사라지면 할 일
            console.log('요소가 사라졌습니다.');
        }
    });
};

// 옵저버 생성
const observer = new IntersectionObserver(callback, {
    root: null, // 뷰포트가 기준
    threshold: 0.5 // 요소의 50%가 보일 때 콜백 호출
});

// 타겟 요소 지정
observer.observe(document.querySelector('.target'));

 

 

---

 

IntersectionObserver() - Web API | MDN

 

화면에 보이는 요소를 감지하는 IntersectionObserver 알아보기 - codeJS

 

JS Intersection Observer, 요소의 가시성 관찰