🙋‍♂️무한 스크롤 관련해서 찾아보다가 intersection observer라는 것을 알게 되었습니다..!

🧙정리

먼저 정리부터 하자면 intersection observer는 타겟 엘리먼트와 타겟의 부모 혹은 상위 엘리먼트의 뷰포트(viewport)가 교차되는 부분을 비동기적으로 관찰하는 API입니다.

• 여기서 뷰포트는 현재 화면에 보여지고 있는 다각형의 영역을 말합니다.

한마디로 화면에 내가 지정한 엘리먼트가 보여지고 있는지를 관찰하는 API 라고 보면 됩니다.

이제 intersection observer에 대해 알았으면 쓰는 이유에 대해도 알아봅시다.

🤷‍♂️왜 쓸까?

1. 첫번째 장점은 reflow를 하지 않습니다.

스크롤 이벤트는 현재의 높이 값을 알기 위해 offsetTop을 사용하는데 정확한 값을 가져오기 위해 매번 렌더 트리를 다시 그립니다. 이것을 reflow라고 하는데, 이 과정이 반복되면 브라우저의 성능이 저하되고, 화면의 버벅거림이 생길 수 밖에 없습니다.

2. 두번째 장범은 호환성이 좋다는 것입니다.

intersection observer는 IE를 제외한 대부분의 브라우저에서 지원된다고 합니다.

마치며

여러가지 엘리먼트 옵저버 라이브러리가 있지만, reflow를 하지 않는다는 점에서 intersection observer를 쓰는 것 같습니다. 저도 intersection observer를 애용하도록 하겠습니다!

참고

Intersection Observer - 요소의 가시성 관찰
Intersection Observer 간단 정리하기