Intersection Observer - 요소의 가시성 관찰, Heropy
💡 IntersectionObserver란?
Observer와 Entry의 교차점을 관찰하고 callback을 실행시킬 때 사용하는 API
관찰자 (Observer)
✅ Options
옵션 | 기본값 | 설명 |
---|---|---|
root | 브라우저 viewport | 화면 교차 영역 |
rootMargin | "0px 0px 0px 0px" | 화면 교차 영역의 마진 값 |
threshold | 0 | target Entry의 화면 교차 비율 0이면 Entry가 교차 영역에 닿자마자 callback 실행 1이면 Entry가 교차 영역에 완전히 보여야 callback 실행 |
관찰 대상 (Entry)
읽기 전용 속성 목록
속성 | 설명 |
---|---|
boundingClientRect | Entry의 사각형 정보 |
intersectionRect | Entry 교차 영역 정보 |
intersectionRatio | Entry 교차 영역 백분율 intersectionRect 영역에서 boundingClientRect 영역까지 비율 |
isIntersecting | Entry와 교차 영역 교차 여부 |
rootBounds | root 요소의 사각형 정보 |
target | 관찰 대상 요소 |
time | 변경 발생 시간 정보 |