[JavaScript] Intersection Observer

오늘은 인스타나 유튜브와 같이 컨텐츠가 무한으로 생성되는 것 같은 기능을 만드는 데 사용되는

Intersection Observer에 대해 알아보겠습니다.

 

---

 

 

Intersection Observer

Intersection observer 는 기본적으로 뷰포트(Viewport)와 설정한 요소(Element)의 교차점을 관찰하여,

요소가 뷰포트에 포함되는지 포함되지 않는지, 더 쉽게 사용자 화면에 지금 보이는 요소인지 아닌지를 

구별하는 기능을 제공합니다.

 

 

intersection ratio 값은 설정한 요소와 뷰포트의 교차점이 50%만큼일 때 를 뜻합니다.

이때 아래 그림처럼 callback function을 호출할 수 있습니다.

 

 

---

예를 들어서 이해

 

설정된 요소인 7번 다음인 end가 스크롤을 통해 threshold가 1일때 (100%) 드러나게 될 때

함수가 호출되며 다음 요소들을 로드하게 될 것입니다.