IntersectionObserver의 비동기 한계를 극복한 Geometry 기반 Scroll Trigger 설계

Context

IntersectionObserver의 비동기적 특성과 Threshold 기반 알림 방식은 정밀한 레이아웃 제어 시 예측 가능성을 저하시킴. 특히 Fixed Header나 동적 높이 변화가 빈번한 실제 웹 레이아웃에서 브라우저 API만으로는 정교한 트리거 시점 제어에 한계가 존재함.

Technical Solution

• IntersectionObserver를 보조 수단으로 활용하며 실제 결정 권한을 Geometry 계산 로직으로 이전한 하이브리드 구조 설계
• Waypoint 모델을 채택하여 단순 가시성 감지가 아닌 레이아웃 내 특정 지점(Marker) 중심의 진입/이탈 이벤트 정의
• 개별 인스턴스의 중복 계산 부하를 줄이기 위해 내부 Scheduler를 통합하여 연산 효율을 최적화한 구조 도입
• RootMargin과 Threshold 설정을 통해 브라우저 기본 동작에 의존하지 않는 독립적인 가시 영역 계산 로직 구현
• 초기 렌더링 시 이미 가시 영역에 포함된 요소에 대해 명시적인 초기 상태(Initial State) 처리 로직 적용