인스타그램은 내려도 계속 콘텐츠가 나온다. 이를 무한 스크롤이라고 한다. Intersection observer는 이를 구현해줄 수 있다.
Intersection observer
기본적으로 뷰포트와 설정한 요소의 교차점을 관찰하여 요소가 뷰포트에 포함되는지 여부인지 구분한다. (= 사용자 화면에 지금 보이는 요소인지 아닌지를 구별한다.)
- 비동기적으로 실행된다.
- 따라서 scroll같은 이벤트 기반의 요소 관찰에서 발생하는 렌더링 성능이이나 이벤트 연속 호출같은 문제없이 사용할 수 있다.
- threshold: 0.5이면 설정한 요소가 뷰포트에 반절만 겹친 것이다.
- 무한 스크롤의 경우, 스크롤을 내려서 end리스트에 오면 가지고 있는 더 많은 리스트를 가져와서 보여주는 형식으로 기능이 구현된다.
- 이미지 lazyloading도 처리 가능하다.
cool & soft codes