scrollbar-width
스크롤바의 외형을 제어합니다. swn은 스크롤 기능은 유지하면서 스크롤바를 숨기고, swt은 얇은 스크롤바를 표시합니다.
클래스 목록
| 클래스 | CSS | 설명 |
|---|---|---|
swa | scrollbar-width: auto | 기본 스크롤바 |
swt | scrollbar-width: thin | 얇은 스크롤바 |
swn | scrollbar-width: none | 스크롤바 숨김 (스크롤은 유지) |
라이브 비교
세 박스 모두 같은 콘텐츠를 담고 있고 스크롤 클래스만 다릅니다. 각 박스를 스크롤해 보고, 아래에 표시된 거터 값(요소 너비에서 콘텐츠 너비를 뺀 값 = 스크롤바가 실제로 차지한 자리)을 비교해 보세요.
swa
본문 줄 1
본문 줄 2
본문 줄 3
본문 줄 4
본문 줄 5
본문 줄 6
본문 줄 7
본문 줄 8
본문 줄 9
본문 줄 10
본문 줄 11
본문 줄 12
스크롤바가 차지한 너비: 0px
swt
본문 줄 1
본문 줄 2
본문 줄 3
본문 줄 4
본문 줄 5
본문 줄 6
본문 줄 7
본문 줄 8
본문 줄 9
본문 줄 10
본문 줄 11
본문 줄 12
스크롤바가 차지한 너비: 0px
swn
본문 줄 1
본문 줄 2
본문 줄 3
본문 줄 4
본문 줄 5
본문 줄 6
본문 줄 7
본문 줄 8
본문 줄 9
본문 줄 10
본문 줄 11
본문 줄 12
스크롤바가 차지한 너비: 0px
거터가 0px이면 스크롤바가 콘텐츠 영역을 밀어내지 않는다는 뜻입니다. 실제 표시 두께는 브라우저와 OS 설정에 따라 다르며, 이 사이트는 전역 스타일에서 이미 얇은 웹킷 스크롤바를 지정하고 있어 브라우저에 따라 swa와 swt의 차이가 작게 보일 수 있습니다.
클래스별 상세
swascrollbar-width: auto
브라우저 기본 두께의 스크롤바를 사용합니다. 초기값이므로 보통은 쓸 일이 없지만, 상위에서 얇게 지정한 스크롤바를 특정 영역에서만 되돌릴 때 유용합니다. 스크롤바가 자리를 차지하므로 콘텐츠 폭이 그만큼 줄어듭니다.
<!-- Default: full-width native scrollbar, space is reserved -->
<div class="swa oya h30rem p2rem bg0F0F17 br8px">
<p>Long content...</p>
</div>swtscrollbar-width: thin
얇은 스크롤바를 사용합니다. 사이드바, 코드 뷰어, 대시보드 패널처럼 좁은 영역에서 콘텐츠 폭을 확보하면서도 스크롤 가능하다는 신호는 남기고 싶을 때 적합합니다. 정확한 두께는 브라우저가 정하며 픽셀 단위로 지정할 수는 없습니다.
<!-- Dense panels: a slimmer bar leaves more room for content -->
<aside class="swt oya h100vh w25rem bg18181B p16px">
<nav>Long navigation list...</nav>
</aside>
<!-- Code viewer -->
<pre class="swt oa maxh40rem p16px bg0F0F17 br8px"><code>...</code></pre>swnscrollbar-width: none
스크롤바를 감춥니다. 스크롤 자체는 휠, 터치, 키보드로 그대로 동작합니다. 가로 칩 목록이나 캐러셀처럼 스크롤바가 레이아웃을 해치는 곳에 쓰지만, 스크롤 가능하다는 단서를 다른 방식으로 반드시 남겨야 합니다.
<!-- Horizontal chip row: still swipeable, no bar in the way -->
<div class="swn oxa df gap8px py8px">
<button class="fs0 py8px px16px br999px bg18181B cA1A1AA bn cp">All</button>
<button class="fs0 py8px px16px br999px bg18181B cA1A1AA bn cp">Design</button>
<button class="fs0 py8px px16px br999px bg18181B cA1A1AA bn cp">Engineering</button>
</div>접근성 주의
swn으로 스크롤바를 숨기면 스크롤 가능 여부를 시각적으로 알 수 없습니다. 콘텐츠가 스크롤 가능하다는 힌트를 별도로 제공하세요. 키보드 스크롤은 그대로 동작하므로 컨테이너에 tabindex를 부여해 포커스로도 스크롤할 수 있게 하는 편이 좋습니다.
사용 예시
<!-- Hidden scrollbar -->
<div class="swn oya h30rem">
<p>Scrollable but the scrollbar is not visible.</p>
</div>
<!-- Thin scrollbar -->
<div class="swt oya h30rem">
<p>A thin scrollbar is displayed.</p>
</div>실전 예시: 스크롤 영역이 있는 모달
헤더와 푸터는 고정하고 본문만 스크롤시키는 모달입니다. 본문에 얇은 스크롤바를 주면 패널이 깔끔해지고, overscroll 제어를 함께 걸면 끝까지 스크롤했을 때 뒤 페이지가 밀리지 않습니다.
<!-- Modal with its own scroll area -->
<div class="pf t0 l0 w100p h100vh df jcc aic bg0-0-0-50">
<div class="w60rem maxh80vh df fdc bg0F0F17 br8px oh">
<!-- Fixed header -->
<header class="df jcsb aic p2rem bb1pxsolid27272A">
<h2 class="fs2rem fw700 cFAFAFA">Terms of Service</h2>
<button class="bn bg27272A cFAFAFA br6px py6px px12px cp">Close</button>
</header>
<!-- Body: thin bar keeps the panel tidy, obc stops scroll chaining -->
<div class="swt obc oya fg1 p2rem fs14px cA1A1AA lh1-7">
<p>Long legal text...</p>
</div>
<!-- Footer -->
<footer class="df jcc gap12px p2rem bt1pxsolid27272A">
<button class="bn bg6366F1 cFFFFFF br8px py12px px2rem cp">Agree</button>
</footer>
</div>
</div>크로스 브라우저
scrollbar-width는 표준 속성이지만, 구형 WebKit 계열은 여전히 ::-webkit-scrollbar 유사요소만 이해합니다. Atomic CSS는 표준 속성 쪽만 클래스로 제공하므로, 두 엔진 모두에서 동일한 모양이 필요하다면 아래처럼 프로젝트 CSS에 유사요소 규칙을 함께 작성하세요.
/* scrollbar-width is the standard property (Firefox first, now widely supported).
Older WebKit/Blink builds only understand the ::-webkit-scrollbar pseudo-elements,
so ship both when you need the styling to hold everywhere. */
.panel {
scrollbar-width: thin; /* standard */
scrollbar-color: #3f3f46 transparent;
}
.panel::-webkit-scrollbar { /* legacy WebKit */
width: 6px;
height: 6px;
}
.panel::-webkit-scrollbar-track { background: transparent; }
.panel::-webkit-scrollbar-thumb { background: #3f3f46; border-radius: 3px; }
/* Fully hidden, both engines */
.no-bar { scrollbar-width: none; }
.no-bar::-webkit-scrollbar { display: none; }주의사항
웹킷 유사요소가 우선할 수 있습니다
프로젝트나 전역 CSS에 ::-webkit-scrollbar 규칙이 이미 있으면 크로미움에서 그 규칙이 이겨서 swa와 swt의 차이가 사라져 보일 수 있습니다. 원인을 찾을 때 전역 스크롤바 스타일부터 확인하세요.
스크롤바 표시가 바뀌면 레이아웃도 흔들립니다
swa에서 swn으로 바꾸면 콘텐츠 폭이 스크롤바 너비만큼 넓어집니다. 호버나 상태 전환에 따라 스크롤바 유무가 바뀌면 콘텐츠가 미세하게 흔들리니, 전환 대신 처음부터 하나를 고정해 쓰는 편이 안전합니다.
swn은 스크롤을 없애지 않습니다
스크롤 자체를 막고 싶다면 oh 같은 overflow 클래스를 쓰세요. swn은 오직 스크롤바의 표시만 없앱니다.
접근성 주의
swn으로 스크롤바를 숨기면 스크롤 가능 여부를 시각적으로 알 수 없습니다. 콘텐츠가 스크롤 가능하다는 힌트를 별도로 제공하세요. 키보드 스크롤은 그대로 동작하므로 컨테이너에 tabindex를 부여해 포커스로도 스크롤할 수 있게 하는 편이 좋습니다.