리액트에서 브라우저 Intersection Observer 사용 질문,

Question

안녕하세요, 채팅 관련 프로그램을 개발하고 있습니다.
다름이 아니라  Intersection Observer를 통한 화면 최적화를 진행하고 있습니다.

원하는 최적화 방식은 isIntersector의 true/false 여부를 통해 화면에 메시지 컴포넌트를 제공하고 있습니다.

동작은 정상적입니다.

그런데 문제가 있습니다.

부모에 Intersection Observer를 두나 자식에  Intersection Observer를 두나 아래 2가지 버그가 동일하게 나타납니다.

1. 다소 긴 채팅 또는 무거운 채팅 메시지는 화면 영역에 나타났음에도 isIntersector가 가끔 false 인경우가 있습니다. 그래서 부모가 높이는 가지고 있으나 내용이 빈 경우가 종종있습니다.

2. 메시지가 화면에서 딱 사라지는 순간 isIntersector가 무한 루프 되면서 true/false를 번갈아 가면서 반환합니다.

브라우저는 엣지입니다. 크롬은 불가능합니다.
1번 같은 경우는 산발적으로 발생하고, 2번은 저 상태가 되면 무조건 발생하는 에러입니다.

검색을 이리저리 해봤는데 도통 해결방법이 나오지 않아 여기에 문의드립니다.

익명 · Answer

첨언.

2번 문제는 rootMargin이 의미가 없습니다. 교차 영역에 가면 무조건 2번문제가 발생합니다.

1번 문제는 메시지 크기가 문제가 아니라 스크롤을 위 아래로 조절 할 때 발생하는 문제입니다.