제목: IntersectionObserver API에서 isVisible 속성 이해하기
웹 개발의 영역에서 IntersectionObserver API는 요소가 화면에 스크롤되었을 때 감지하기 위한 중요한 도구가 되었습니다. 하지만 isVisible 속성의 동작에 의문이 생길 수도 있습니다.
isVisible 속성이란?
isVisible 속성은 Intersection Observer v2에 제안된 업데이트 중 하나입니다. 이 속성은 대상 요소의 실제 가시성에 대한 정보를 제공합니다. 이 기능을 활성화하기 위해서는 옵저버를 생성할 때 특정 옵션들을 포함해야 합니다.
const options = {
root: null,
rootMargin: '0px',
threshold: 0,
/* 필수 옵션 */
trackVisibility: true,
delay: 100 // 최소 100
}trackVisibility 옵션을 true로 설정하고 100 밀리초를 초과하는 유효한 delay를 적용하여 isVisible 속성을 활용하여 요소의 가시성 상태를 정확히 판단할 수 있습니다.
Intersection Observer v2의 브라우저 지원
Intersection Observer v2의 브라우저 지원은 다양합니다. 현재로서는 크롬 기반의 브라우저인 Chrome과 Edge만이 이 업데이트된 버전을 구현하였습니다. isVisible 속성을 사용하기 전에 Can I use를 통해 브라우저 지원 여부를 확인하는 것이 권장됩니다.
가시성 확인과 Intersection Observations 처리하는 방법
Intersection Observer v2를 사용할 때, 대상 요소와 뷰포트 간의 교차에 대한 중요한 정보를 제공하는 IntersectionObserverEntry 객체에 액세스할 수 있습니다. 요소가 완전히 보여지는지 확인하기 위해, threshold 값을 1로 조정하고 intersectionRatio 속성을 평가할 수 있습니다:
const opts = {
root: null,
rootMargin: '0px',
threshold: 1
}
const callback = entry => {
if (entry.intersectionRatio === 1) {
// 요소가 완전히 보여짐
console.log('요소가 완전히 보임');
}
};
const observer = new IntersectionObserver(callback, opts);
observer.observe(intersectTarget.current);threshold를 1로 설정하고 intersectionRatio 속성을 1과 비교함으로써 요소가 뷰포트 내에서 완전히 보여지는지를 정확하게 판단할 수 있습니다.
결론
IntersectionObserver API의 isVisible 속성을 이해하는 것은 요소의 가시성을 정확히 감지하는 데 중요합니다. 올바른 옵션을 구현하고 intersectionRatio를 확인함으로써 교차 감지를 효과적으로 처리하고 요소가 완전히 보일 때 필요한 작업을 수행할 수 있습니다. 프로젝트에서 이 기능을 사용하기 전에 Intersection Observer v2의 브라우저 지원을 확인하고 호환성을 검증하는 것을 기억해주세요.
