scrollbar-gutter — 스크롤바 등장으로 인한 레이아웃 점프 방지

페이지 콘텐츠가 늘어나 스크롤바가 나타나는 순간, 본문이 스크롤바 폭만큼 좌우로 점프하는 경험. 모달 열고 닫을 때, 모바일/데스크톱 전환할 때, 콘텐츠가 짧아 스크롤바가 사라질 때 — 모두 같은 원인입니다. CSS scrollbar-gutter 속성으로 한 줄에 해결됩니다.

1. 문제 — 스크롤바 폭이 본문에 영향

기본 동작은 "스크롤바가 필요할 때만 공간을 차지"입니다. 그래서 콘텐츠 길이에 따라 본문이 흔들립니다.

특히 모달이 열려 body { overflow: hidden } 처리할 때, 스크롤바가 사라지면서 본문이 우측으로 밀려납니다. 헤더/네비도 같이 흔들립니다.

2. scrollbar-gutter로 공간 예약

1html {
2  scrollbar-gutter: stable;
3}

스크롤바 공간을 항상 예약합니다. 콘텐츠가 길어 스크롤바가 생기든 안 생기든 본문 폭이 같습니다. 모달 열기/닫기, 콘텐츠 변화에 본문이 흔들리지 않습니다.

3. both-edges 옵션

both-edges를 추가하면 좌우 양쪽에 같은 폭을 예약해 본문이 시각적으로 정확히 가운데에 옵니다.

1html {
2  scrollbar-gutter: stable both-edges;
3}

콘텐츠가 정중앙에 와야 하는 article/blog 페이지에 어울립니다. 단 좌우 모두 예약하므로 가용 폭이 약간 줄어듭니다.

4. 모달 패턴

모달 열 때 보통 body { overflow: hidden }을 적용해 본문 스크롤을 막습니다. scrollbar-gutter: stable이 있으면 이 시점에 본문 폭이 변하지 않습니다.

1html { scrollbar-gutter: stable; }
2
3body.modal-open { overflow: hidden; }

자바스크립트로 보정하던 코드가 사라집니다.

1// 더 이상 필요 없음
2const w = window.innerWidth - document.documentElement.clientWidth;
3document.body.style.paddingRight = `${w}px`;

5. 주의할 점

• scrollbar-gutter는 스크롤 가능한 컨테이너에만 적용됩니다. overflow: hidden인 요소에는 의미 없음.
• macOS의 overlay scrollbar(자동 숨김)에는 영향이 없습니다. 이미 폭을 차지하지 않기 때문.
• Windows / Linux의 고정 폭 스크롤바에서 효과가 큽니다.
• 브라우저 지원: Chrome 94+, Safari 18.2+, Firefox 97+.

6. 다른 방법과 비교

방법	단점
overflow-y: scroll 항상 강제	콘텐츠 짧을 때도 스크롤바 노출, 미관 ↓
JS로 padding 보정	코드 복잡, 깜빡임 가능, 유지보수 ↑
scrollbar-gutter: stable	한 줄, 표준, 스크롤바 시각 변화 없음

7. 정리

1/* 권장 디폴트 */
2html { scrollbar-gutter: stable; }
3
4/* article 가운데 정렬이 중요할 때 */
5html { scrollbar-gutter: stable both-edges; }

스크롤바 점프는 사용자가 눈치 채는 작은 결함입니다. 한 줄로 고치고 그 위에 다른 작업을 하는 게 효율적입니다.

참고: MDN — scrollbar-gutter / Can I Use scrollbar-gutter.