IntersectionObserver를 이용한 scroll detector | Javascript

IntersectionObserver를 사용하여 스크롤 이동 감지기를 만들어봅니다.

---

IntersectionObserver

타겟 요소가 화면에 표시되거나 숨겨지는(뷰포트에 보이거나 사라지는) 이벤트를 감지하여 특정 동작(메소드)를 실행합니다.

요소가 표시/숨겨지는 기준 비율(0.0~1.0)을 설정할 수 있습니다.

• 0 : 1px이라도 보이면 invoke
• 1 : 요소 전체가 보여지면 invoke

 

생성하기

new 키워드를 사용하여 IntersectionObserver 객체를 생성합니다.

const io = new IntersectionObserver(callbackFn, options);

 

callbackFn function

타겟 요소가 보이거나 숨겨질 때 실행될 동작(메소드)입니다.

param1 IntersectionObserverEntry[]

타겟 요소들을 배열 형태로 반환합니다.

• intersectionRatio number
  뷰포트에 표시되고 있는 영역이 요소 영역 기준 비율
• isIntersecting boolean
  요소가 뷰포트 기준과 교차 여부
  T : 교차 아닌 상태 > 교차 상태로 전환
  F : 교차 > 교차 아닌 상태로 전환
• target HTMLElement
  대상 요소 객체

 

param2 HTMLElement

observer 객체입니다.

 

options object

• root HTMLElement
  뷰포트 기준
  default : Document
• rootMargin string
  뷰포트 여백 설정
  default : "0px 0px 0px 0px"
• threshold number
  기준 비율(0.0~1.0)
  default : 0

 

구현하기

최초 바인딩 시 대상 요소가 뷰포트에 보이는 것과 상관없이 1회 실행됩니다.

function initObserver() {
	// 요소 표시 기준 비율
    const ratio = 0.3;	// 30%
    // 타겟 요소
    const elTarget = document.getElementById("target");
    
    const io = new IntersectionObserver(
    	([e], ob) => {
        	const taret = e.target;
            const isShow = e.intersectionRatio >= ratio;
            
            if (isShow) {
            	target.style.backgroundColor = "pink";
            } else {
            	target.style.backgroundColor = "darkblue";
            }
        },
        {
        	threshold : ratio,
        },
    );
    
    // 바인딩
    io.observer(elTarget);
}

 

 

 

Intersection Observer API - Web API | MDN