스크롤바에 의한 컨텐츠 위치 이동 막기
아래 GIF 보이듯 스크롤바가 없다가 등장하는 경우 기존 요소들이 이동하는 문제가 존재한다. 이 문제는 무신사와 지그재그에서도 나타나고있다.
얼핏보면 가운데 컨텐츠 영역의 너비가 달라지는 문제처럼 보이지만, 실제로는 스크롤바가 나타나면서 가운데 컨텐츠 영역이 전체적으로 왼쪽으로 이동하는 문제이다.
이 문제는 아래 보이듯 무신사에서도 발생하고있다.
이를 해결하기 위해 크게 세 가지 방법이 존재한다.
-
overflow-y: overlay 적용하기
-
html에 overflow-y: scroll 적용하기
-
html에 width: 100vw와 overflow-x: hidden 적용하기
1번의 경우, deprecated 됐으므로 패스한다.
2번의 경우, 스크롤이 있든 없든 기본적으로 스크롤바가 보여지게해서 width가 일정하게 보여지도록 하는 방법인데 불필요한 스크롤바가 존재하게된다.
3번의 경우 앞선 문제들이 존재하지 않으며, 웹뷰 + 모바일 브라우저 + 데스크톱 브라우저를 확인했을 때 어떠한 문제도 발생하지 않는다.
참고로 overflow-x: hidden을 적용하는 이유는 y축 스크롤바가 존재하는 경우 해당 스크롤바로 인해 width가 100vw를 초과하여 x축 스크롤바가 생기기 때문에 이를 제거하고자 적용한다. 만약 제거하지 않으면 아래 지그재그 사이트와 같은 문제가 발생하게된다.
이 방법의 단점은 UI 라이브러리들을 사용할 때 width가 100vw인 상황을 고려하는 것이 아니라 100%인 상황을 고려하여 만들어진다는 점이고, 이로인해 발생하는 차이를 잡아주어야한다. 예를들면 아래는 Drawer와 BottomTab 컴포넌트가 존재하는 상황인데, BottomTab이 100vw를 기준으로 센터가 맞춰졌고 Drawer는 100%를 기준으로 센터가 맞춰져서 Drawer가 약간 왼쪽으로 치우쳐져 있는 것을 알 수 있다.
이외에
추가적인 방법으로 커스텀한 스크롤바를 직접 만들고 width를 고정값으로 정의한 뒤, 스크롤바가 존재하지 않는 경우에 해당 스크롤바 width만큼 padding을 주는 방법도 존재한다. zustand 공식 문서에서는 이 방법을 이용하여 스크롤바가 사라져도 컨텐츠 위치가 이동되지 않도록 만들었다.
위 gif를 보면 모달을 띄울 때 스크롤바가 사라짐에도 불구하고 가운데 컨텐츠 영역은 실제로 이동하지 않는 것을 알 수 있다. 그리고 <body>에 스크롤바 width만큼 padding이 추가되는 것을 알 수 있다.
참고 문헌
html - Prevent scrollbar from adding-up to the width of page on Chrome - Stack Overflow