교차상태 감지 웹 API - IntersectionObserver()

회사에서 현재 진행 중인 프로젝트에 "교차상태 감지"를 사용해야 되는 일이 있었다.

→ 상단에는 카테고리 탭, 아래쪽으로는 리스트가 나열된 페이지에서:

1. 스크롤이 될 때마다 현재 보고있는 섹션에 맞는 카테고리에 언더라인이 되어야 하고,
2. 반대로 카테고리를 클릭하면 해당 섹션으로 자동 스크롤을 시켜야 했다.

이걸 단순히 JS의 addEventListener('scroll') 가지고 처리하는건가 했었는데, 알고보니 관련된 JS 웹 API가 있었다!

실제로 프로젝트에 사용해보고 기본 개념과 문법을 정리해봤다.

---

IntersectionObserver()

웹 브라우저에서 어떤 요소가 뷰포트 혹은 다른 요소 안에 들어오거나 나가는걸 감지할 수 있게 해주는 API

기본적인 문법은 아래와 같다.

const observer = new IntersectionObserver(callback, options);

• callback: 요소가 관찰 대상과 교차할 때 호출될 콜백함수
• options: 옵저버의 동작 방식을 설정하는 옵션 객체 (선택 사항)

---

기본 문법 해석 및 옵션 객체의 종류

const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      console.log("요소가 화면에 보이기 시작!");
    }
  });
}, {
  root: null, 
  rootMargin: "1px 2px 3px 4px", 
  threshold: 0.5 
});

observer.observe(document.querySelector('.target'));

GPT가 작성해준 간단한 예시 코드를 보자.

먼저 콜백함수에서 인자로 보낸 entris, observer는 아래와 같은 의미를 갖고 있다.

• entries: 현재 관찰 중인 모든 요소들의 상태 정보를 담은 배열
• observer: 이 IntersectionObserver 인스턴스 자체

콜백함수에서 인자로 넘겨준 entries를 반복문으로 돌려서 어떤 요소가 보이고 있는지 체크해서, 만약에 요소가 루트 영역 (기본은 뷰포트)와 겹치기 시작하면 조건문 내부의 스코프를 실행하게 된다.

그리고 옵션의 종류는,

• root: 관찰 기준이 되는 요소. null로 설정하거나 아예 생략하면, 뷰포트(브라우저 화면)가 기준이 된다.
• rootMargin: 루트 기준에서 margin을 얼마나 줄지 설정. top, right, bottom, left 순서로 지정. px, %, 음수도 가능하다.
• threshold: 요소가 루트와 얼마나 겹쳐야 콜백이 실행될지 결정한다. 0~1까지의 숫자로 설정할 수 있다. 0.5면 요소가 50% 이상 보일 때 콜백이 호출된다.

observer 설정 이후 마지막 줄은, .target 이라는 요소를 관찰대상으로 등록하여 해당 요소가 화면 스크롤 도중 어떤 위치에 있는지를 파악해서 앞서 설정한 observer를 실행하겠다는 의미다.

---

아무튼 그리하여, 실제 회사 프로젝트에 사용했고 기능 자체는 문제가 없다.

그런데 아래로 스크롤을 내릴때 카테고리 탭이 너무 빨리 선택되는 경향이 있어서, 옵션 설정에서 rootMargin을 어떻게 잡아야할지 고민 중이다. 어떤 기준으로 잡아야 내가 원하는 모습으로 구현이 될까..🤔

정답은 없겠지만, 계속 고민하고 실험하다보면 언젠가는 만족스러운 결과에 도달하겠지!😆

---

참고 - https://developer.mozilla.org/ko/docs/Web/API/IntersectionObserver/IntersectionObserver

IntersectionObserver() - Web API | MDN