intersection observer의 entries 진짜 마지막으로 이해하기

intersection observer 이해하기 에서 이어지는 내용이다.

사진에서 보이듯이, 배열에 원소가 하나 들어갔다가 2개 들어갔다가.. 아주 난리다.

 

여러 대상을 관찰하는 경우에도 보통 entries 배열에는 하나의 요소만 들어있는 것이 정상이다.

 

이 동작의 이유는 !!!!!!!

관찰 + 교차되는 대상에 대해 IntersectionObserver 객체의 콜백 함수가 실행되기 때문이다!!!!!!

코드에서 각각 다른 대상 요소를 관찰하는 3개의 개별 IntersectionObserver 인스턴스를 사용하고 있다. 따라서 콜백 함수는 교차된 각 대상에 대해 한 번씩 호출된다.

결론: 콜백 함수는 관찰된 각 대상에 대해 개별적으로 호출되므로 entries에는 observer.observe를 통해서 구독해놓은 녀석들이 전부 보이는 것이 아니다. 그 중 교차되고 있는 녀석들만 확인할 수 있는 방식이다.

 

여기서 직접 코드를 굴려볼 수 있다.

Edit fiddle - JSFiddle - Code Playground