사이드바 닫으면 스크롤이 맨 위로 올라가는 버그 해결기 (PrimeReact + Virtual Scroller)

🚨문제

PrimeReact DataTable에서 *가상 스크롤(virtualScrollerOptions)*을 사용할 때,
사이드바를 열고 특정 항목을 클릭하면 해당 인덱스로 잘 이동된다.
하지만 사이드바를 닫았다가 다시 열면,
화면이 맨 위로 올라갔다가 선택된 인덱스로 스크롤되는 문제가 발생했다.

 

👩‍🌾 원인 

• 기존에는 사이드바 콘텐츠를 <div style="display: none" /> 으로 숨기고 있었음
• display: none이 되면 내부 컴포넌트가 언마운트됨
• 다시 열었을 때 새로 마운트되므로, 스크롤 위치가 초기화됨 →
  항상 1번부터 다시 렌더된 뒤 스크롤로 이동하는 버그 발생

 

✒️ 해결 방법

❌ 기존 방식
display: active ? "flex" : "none"
→ 렌더링 자체를 중단시켜 버리기 때문에 문제가 생김

✅ 수정한 방식
style={{
  position: isActive ? "relative" : "absolute",
  visibility: isActive ? "visible" : "hidden",
  pointerEvents: isActive ? "auto" : "none",
  opacity: isActive ? 1 : 0,
}}

 

 

→ 이렇게 하면 컴포넌트는 유지되면서도, 시각적으로만 숨겨지는 효과가 생김
→ 다시 열었을 때 스크롤 위치와 내부 상태가 유지됨

 

🚨 추가 문제: InputSwitch가 늦게 사라짐

PrimeReact의 InputSwitch를 사이드바 내에서 사용 중일 때,
사이드바를 닫으면 버튼이 0.5초 정도 늦게 사라지는 잔상 현상 발생

 

👩‍🌾 원인

• position: absolute, visibility: hidden 등은 요소가 보이지 않게만 만들고, 렌더링은 계속 되기 때문에 내부 애니메이션이 여전히 진행됨
• InputSwitch에는 기본적으로 트랜지션이 적용되어 있어 상태 전환 시에 딜레이가 생김

 

✒️ 해결 방법

opacity: isActive ? 1 : 0

 

• opacity를 조절해 부드럽게 사라지게 처리
• 트랜지션을 별도로 지정하지 않아도,
  InputSwitch 내부 기본 트랜지션(0.2s ease) 덕분에
  자연스럽게 사라지며 잔상이 남지 않음