Intersection Observer API의 개념 및 사용법 / 고속 스크롤에 대한 이슈

회사에서 운영중인 무한스크롤에 오류가 있는듯 하였다. (나는 재현되지 않음) 해당 오류를 파악하려다 보니 구현되어있는 intersection Observer API와 밀접한 관련이 있다는 것을 알게되었고, IO api에 대하여 대충만 이해하고 있다는 느낌이 들어 정리해 보기로 하였다.

 

✔️ Intersection Observer API란?

---

intersection Observer API는 관찰하고자 하는 element가 viewport에 진입하거나 사라질 때, 즉 element를 관찰하다가 viewport에서 교차 될 때마다 콜백함수를 실행할 수 있게 해주는 api이다. 

한 마디로는 내가 궁금한 element가 뷰포트 내에 진입했는지를 확인하고, 진입했다면 지정한 함수를 호출해 준다.

IO api는 비동기적으로 실행되어 이벤트의 과도한 호출에 따른 성능 이슈 등에서 비교적 자유로운 편이다. 다만, 해당 api를 제공하지 않는 브라우저도 있기 때문에 Polyfill이 필요하다.

 

✔️ Intersection Observer 사용영역

---

• 페이지가 스크롤 되는 도중에 발생하는 이미지 등의 lazy loading
• infinite scroll에서 스크롤 시, 컨텐츠 로드
• 사용자 결과에 따른 애니메이션 사용 여부
• 광고 수익 계산을 위한 가시성 보고 (이건 MDN에 나온 말인데, 뭔지 잘 모르겠다.)

 

✔️ Intersection Observer 생성

---

let observer = new IntersectionObserver(callback, options);

 

👉 callback

callback은 말 그대로 요소가 뷰포트에 진입했을 때, 실행할 함수를 의미한다. 여기서 설명할 부분은 다음과 같은 방식으로 요소마다 체크를 하기 위한 옵션을 의미한다.

let callback = (entries, observer) => {
  entries.forEach(entry => {
      // 하단은 entry 속성에 관한 설명입니다.
      // 예시
      if (entry.isIntersecting) {
      	// 화면서 그려졌을 때, 필요한 로직
      }
      /**
        target element:
          entry.boundingClientRect
          entry.intersectionRatio
          entry.intersectionRect
          entry.isIntersecting
          entry.rootBounds
          entry.target
          entry.time
      */
    });
  };

• time : 교차된 시간(타임스탬프)
• isIntersecting : 해당 entry의 뷰포트 교차 여부 (true/false)
• intersectionRatio : 뷰포트에 타겟 요소가 얼만큼의 비율로 교차되었는지에 대한 값 (0~1.0)
• intersectionRect
  • 교차 시 화면에 보여지고 있는 entry의 크기와 위치 (=getBoundingClientRect)
  • reflow가 발생하지 않음
• rootBounds
  • root 요소의 크기와 위치 (= getBoundingClientRect)
  • reflow가 발생하지 않음
  • root가 지정되지 않았다면 null값 반환
• boundingClientRect
  • 타겟 요소의 크기와 위치 (=getBoundingClientRect)
  • reflow가 발생하지 않음

 

👉 options

• root
  • 타겟 요소의 노출 기준 (여기서 지정한 element를 기준으로 관찰하는 요소가 들어오는지를 확인한다)
  • 지정하지 않았을 때(null), 기본값은 뷰포트
• rootMargin
  • root가 되는 element의 margin값
  • 기본 : 0px (px, % 등의 단위 사용 가능)
• threshold
  • 0.0 ~ 1.0까지 타겟 요소의 노출 비율 설정 가능
  • 1.0으로 설정 시, root 요소에 element가 100% 노출 되어야 콜백을 실행한다는 의미 (0은 1px이라도 노출 되자마자 바로 콜백을 실행하겠다는 의미)
  • 25% 단위로 콜백이 실행되게 하고 싶다면 배열로 설정 가능 ( ex. [0, 0.25, 0.5, 0.75, 1] )

 

✔️ Intersection Observer 해제

---

IntersectionObserver.unobserve(targetElement);

 

✔️ Intersection Observer 주의점

---

많은 곳들이 intersection Observer를 찬양하고 사용을 권한다. 물론 element를 쉽게 디텍팅 할 수 있다는 점과 그러면서도 성능상 이슈가 없다는 점은 매우 좋은 측면이라고 생각한다. 다만, IO api에도 보이지 않는 헛점이 있으며, 만능이 아니라는 것은 분명 인지해야 할 부분이다.

IO api는 브라우저 랜더 주기와 결합하여 빠르게 진행되지만 스크롤을 해당 검사하는 속도보다 빠르게 움직인다면 일부에서 교차 변경을 감지하지 못하는 오류가 있다. 감지 되지 않았기 때문에 해당 요소는 callback을 불러오지 못한다. 보통의 장치 기준으로 60fps 또는 16.66ms가 기준이 된다. (개인적으로는 스크롤을 아무리 빨리 내려도 교차 지점을 체크하지 못하는 오류는 발생하지 않닸다.)

혹시 intersection Observer를 사용하다가 초고속 스크롤에 따른 버그가 있어 이 포스팅까지 흘러 들어왔다면 하단 스택오버플로우를 참고해도 좋을 것 같다. 아는 것 처럼 여기서는 다양한 사람들이 해결 방법에 대해 제시를 해줄 뿐 각자의 코드에 따라 해결책이 아닐 수도 있다.

https://stackoverflow.com/questions/61951380/intersection-observer-fails-sometimes-when-i-scroll-fast

Intersection Observer fails sometimes when i scroll fast