[React] Mac OS에서 사이드바로 스크롤 전파되는 문제 해결하기 (feat. 스크롤 체이닝)

지난 게시글에서, 댓글 추가 시 화면 하단으로 스크롤 되도록 무사히 구현을 마쳤다.

그런데 어느날 우리 팀원이 보내준 사진이다.

어라...?

사이드바 영역이 잘린 채로 표시되고 있었다. 분명 내 컴퓨터에서는 모두 정상적으로 작동했고, 다른 팀원들 리뷰를 받았을 때도 이상이 없었기에 해당 팀원이 유일하게 컴퓨터가 "맥"이라는 것이 원인 분석의 시작이었다.

 

구글링을 해본 결과, 윈도우와 맥은 스크롤 처리 방식이 다르고, 맥은 어떤 컴포넌트의 스크롤이 끝나면 해당 컴포넌트의 형제나 부모에게까지 스크롤 이벤트를 전파 시킬 수 있다고 한다. 이처럼 스크롤 이벤트가 상위로 전파하는 것을 스크롤 체이닝(Scroll Chaining)이라고 한다.

 

우측의 본문에서 댓글 입력창이 sticky로 고정되어 있기 때문에, 스크롤시 해당 영역만큼 공간을 남기고 스크롤하게 설정했는데, 이것이 사이드바의 스크롤에도 체이닝되어 빈 공간이 생겨버린 것이다.

 

참고문서:

https://mygumi.tistory.com/424

[CSS] overscroll-behavior 속성 :: 마이구미

https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior

overscroll-behavior - CSS | MDN

 

이를 해결하는 방법은 스크롤이 일어나는 컴포넌트의 CSS 속성에 overscroll-behavior 속성을 이용하는 것이다.

 

overscroll-behavior 속성

• auto - 기본 값. 상위로 스크롤 이벤트를 전파한다.
• contain - 스크롤 체이닝을 막는다.
• none - 스크롤 체이닝을 막는다.

하지만.. 결론적으로 말하자면 잘 되지 않았다. 우측 페이지 전체 컴포넌트에 적용해도, 화면 넘침을 유발하는 댓글 리스트에 적용해도 해당 문제는 해결되지 않았다...

 

overscroll-behavior은 스크롤이 한계에 도달했을 때, 이벤트가 부모/형제 요소로 전파되는 것을 막기 위한 속성이다.  
하지만 이 속성은 스크롤 영역이 정확하게 독립되어 있을 경우에만 잘 동작한다.  
이번 케이스에서는 댓글 입력창과 전체 레이아웃의 관계, sticky 영역 등 복잡한 요소들이 섞이면서 예상처럼 적용되지 않았다.

 

그 다음으로 적용해본 것은, 사이드바를 fixed로 설정하여 레이아웃 흐름에서 분리하는 방법이었다.

레이아웃 파일의 원래 구조는 다음과 같이 flex로 레이아웃과 본문 내용을 단순 정렬하는 방식이었다.

 

기존 레이아웃

 <div className="flex h-screen"> {/* 기존 : flex로 정렬 */}
 
  {/* 좌측 사이드바 영역 */}
  <aside className="overflow-auto">
    {isSettingRoute ? <SettingSidebar /> : <Sidebar />}
  </aside>
  
  {/* 우측 본문 영역 */}
  <main className="flex flex-1 min-w-0 min-h-max overflow-auto">
    <Outlet />
  </main>
</div>

 

변경 후는 다음과 같다. fixed를 사용하다보니 사이드바의 너비도 필요해서, 펼친 사이드바와 접힌 사이드바의 너비 지정도 여기서 관리했다. 또한, 본문에는 사이드바 너비만큼 패딩을 지정하여 사이드바에 가리지 않게 해주었다.

 

개선 레이아웃

<div className="flex h-screen">

  {/* 사이드바를 fixed로 변경 */}
  <aside
    className="fixed top-0 left-0 h-screen overflow-auto"
    style={{ width: sidebarOpen ? SIDEBAR_WIDTH.FULL : SIDEBAR_WIDTH.MINI }}
  >
    {isSettingRoute ? <SettingSidebar /> : <Sidebar />}
  </aside>
  
  <main
    className="flex flex-1 overflow-auto"
    style={{ paddingLeft: sidebarOpen ? SIDEBAR_WIDTH.FULL : SIDEBAR_WIDTH.MINI }}
  >
    <Outlet />
  </main>
  
</div>

 

사이드바 너비 지정도 원래는 사이드바 컴포넌트에서 각각 해줬었는데, 이처럼 아예 레이아웃에서 하는게 유지보수가 쉽고 좋다. 부모로 빼길 잘한 것 같다.

이렇게 사이드바를 fixed 로 바꾸었더니, 스크롤이 전파되는 문제가 해결되었다.

 

✅ 배운 점

• Mac 환경에서는 스크롤 체이닝에 주의하자
• overscroll-behavior는 구조가 단순할 때만 잘 동작
• 레이아웃 분리를 통한 구조적 해결이 더 확실할 수 있다