Intersection Observer API

Intersection Observer 는 특정 Element 들을 감시하면서 해당 요소가 이용자의 브라우저 화면 안에 들어왔음을 탐지하면, 지정된 함수가 실행되도록 만들 수 있는 객체입니다. 사용법은 다음과 같습니다. // 먼저 observer 객체를 생성합니다. const observer = new IntersectionObserver(callback, options) // 생성 후 어떤 요소를 감시할 것인지를 지정합니다. 하나가 아니라 여러개를 하나의 // 옵저버로 감시할 수도 있습니다. IntersectionObserver.observe(element)

 

 

 

Callback Function

 

callback 은 말할 것도 없이 Intersection 이벤트가 발생했을 때 실행될 함수입니다. 이 콜백함수는 첫번째 매개변수로 intersection 이벤트의 정보를 담은 객체들이 담긴 배열을 받을 수 있습니다. 배열인 이유는 하나의 옵저버가 여러개의 엘리먼트를 감시할 수 있기 때문에, 이 배열 안에 감시하고 있는 각 요소마다의 intersection 정보가 담기기 때문입니다. 두번째 매개변수로는 해당 observer 자체에 대한 참조 매개변수가 담기지만, 이용할 일은 거의 없습니다. entry 객체 안에는 우리가 사용할 수 있는 매우 유용한 정보가 담겨 있습니다. 예를 들어 entry.target 에는 감시 대상인 요소에 대한 참조가 담기고, entry.isIntersecting 은 intersection 여부에 대한 boolean 값이 담깁니다.

 

 

 

 

 

Options

또 한가지 중요한 점은 옵저버 객체를 생성할 때 콜백함수 옆에 넣을 수 있는 options 객체입니다. 형식은 대략 아래와 같습니다.

 

 

root 는 intersection 여부의 기준이 되는 root 요소를 지정하는 것입니다. null 을 집어넣거나 아무것도 집어넣지 않으면 그냥 브라우저의 viewport 가 기본으로 적용됩니다. rootMargin 은 instersection 의 기준이 되는 지점을 viewport 에서 이동시키고 싶을 때 사용합니다. threshold 는 해당 viewport 크기의 몇 퍼센트 정도를 감시하고 있는 요소가 차지해야 intersection 인지로 판단할지의 여부를 결정합니다. 0으로 해두면 아주 조금의 크기라도 요소가 차지하는 크기가 있다면 intersection 으로 판단하고, 1로 해두면 viewport와 완전히 정확한 크기 이상이어야 intersection 으로 판단할 것입니다. 1으로 하면 참고로 아예 intersection 이 일어나지 않습니다.

 

Unobserve

 

인터섹션이 한번 끝나면, 이를 해제하는게 필요하거나, 그 편이 더 성능 관점에서 좋은 선택일 수 있습니다. 옵저버 객체의 .unobserve(Element) 메서드를 사용하면 이를 수행할 수 있습니다.