Intersection Observer

스크롤 이벤트의 압도적인 상위 호환

Intersection Observer API는 특정 요소가 브라우저 뷰포트(화면)나 특정 부모 컨테이너 영역에 들어오거나 나갈 때를 비동기적으로 감지하는 기능입니다.
과거에는 스크롤 애니메이션이나 무한 스크롤을 구현할 때 window.addEventListener('scroll')을 사용해야 했는데, 이는 스크롤 할 때마다 수천 번의 함수를 실행시켜 심각한 성능 저하(버벅임)를 유발했습니다. Intersection Observer는 브라우저 내부적으로 최적화되어 작동하므로 성능 저하 없이 부드러운 스크롤 감지가 가능합니다.

1. "계속 물어보기" vs "CCTV 알림" (비유)

🗣️

기존 Scroll 이벤트 (비효율)

"화면에 보여? 안 보여? 지금은? 지금은? 지금은?"
스크롤을 1px 움직일 때마다 위치를 계산하며 끊임없이 질문합니다. 브라우저가 매우 피곤해집니다.

🎥

Intersection Observer (효율)

"나는 잘 테니까, 저 영역에 누군가 들어오면 알람 울려줘."
스마트 CCTV를 설치한 것처럼, 조건(예: 50% 보임)이 달성될 때만 조용히 알림(콜백 함수)을 보내줍니다.

2. 감지 흐름 다이어그램

3. 주요 옵션(Options) 정리

옵션명	설명
root	관찰의 기준이 되는 부모 컨테이너 요소를 지정합니다. 기본값은 `null`이며, 이는 브라우저의 뷰포트(전체 화면)를 의미합니다.
rootMargin	관찰 영역을 늘리거나 줄일 수 있는 마진 값입니다. (예: `"100px 0px"`로 설정하면 화면에 진입하기 100px 전부터 감지합니다. 무한 스크롤(Lazy Load) 선행 로딩에 유용합니다.)
threshold	대상 요소가 얼마나 보여졌을 때 알림을 받을지 0.0 ~ 1.0 사이의 값으로 설정합니다. `0`이면 1px라도 보이면 실행, `1.0`이면 요소 전체가 완벽히 보여야 실행됩니다. (배열로 여러 값을 설정할 수도 있습니다.)