scrollbar-width
Controls the appearance of scrollbars. swn hides the scrollbar while maintaining scroll functionality, and swt displays a thin scrollbar.
Class List
| Class | CSS | Description |
|---|---|---|
swa | scrollbar-width: auto | Default scrollbar |
swt | scrollbar-width: thin | Thin scrollbar |
swn | scrollbar-width: none | Hidden scrollbar (scroll still works) |
Live Comparison
All three boxes hold identical content and differ only in the scrollbar class. Scroll each one, then compare the gutter value below it: element width minus content width, which is the space the scrollbar actually took.
swa
Body line 1
Body line 2
Body line 3
Body line 4
Body line 5
Body line 6
Body line 7
Body line 8
Body line 9
Body line 10
Body line 11
Body line 12
Width taken by the scrollbar: 0px
swt
Body line 1
Body line 2
Body line 3
Body line 4
Body line 5
Body line 6
Body line 7
Body line 8
Body line 9
Body line 10
Body line 11
Body line 12
Width taken by the scrollbar: 0px
swn
Body line 1
Body line 2
Body line 3
Body line 4
Body line 5
Body line 6
Body line 7
Body line 8
Body line 9
Body line 10
Body line 11
Body line 12
Width taken by the scrollbar: 0px
A gutter of 0px means the scrollbar is not pushing the content area in. The rendered thickness depends on the browser and OS settings, and this site already declares a thin WebKit scrollbar globally, so in some browsers swa and swt may look closer than they would elsewhere.
Class Details
swascrollbar-width: auto
Uses the browser default scrollbar thickness. It is the initial value, so you rarely need it, except to restore a normal bar inside a region where an ancestor made scrollbars thin. The bar occupies layout space, so the content box is narrower by that amount.
<!-- Default: full-width native scrollbar, space is reserved -->
<div class="swa oya h30rem p2rem bg0F0F17 br8px">
<p>Long content...</p>
</div>swtscrollbar-width: thin
Uses a slim scrollbar. A good fit for sidebars, code viewers, and dashboard panels where you want to reclaim horizontal space but still signal that the area scrolls. The exact thickness is decided by the browser and cannot be set in pixels.
<!-- 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
Hides the scrollbar. Scrolling itself still works with the wheel, touch, and the keyboard. Use it for horizontal chip rows or carousels where a bar would break the layout, but always leave another cue that the area scrolls.
<!-- 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>Accessibility Note
Hiding the scrollbar with swn removes the visual indicator of scrollability. Provide a separate hint that the content is scrollable. Keyboard scrolling still works, so giving the container a tabindex lets people scroll it once focused.
Usage Examples
<!-- 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>Practical example: modal with a scrolling body
A modal whose header and footer stay put while only the body scrolls. A thin bar keeps the panel tidy, and overscroll containment stops the page behind from moving once you reach the end.
<!-- 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>Cross-browser
scrollbar-width is the standard property, but older WebKit engines still only understand the ::-webkit-scrollbar pseudo-elements. Atomic CSS ships classes for the standard property only, so write the pseudo-element rules in your own CSS when the styling has to match on both engines.
/* 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; }Pitfalls
WebKit pseudo-elements can win
If your project or global CSS already contains a ::-webkit-scrollbar rule, Chromium may let that rule win and the difference between swa and swt disappears. Check global scrollbar styles first when debugging.
Toggling the scrollbar shifts your layout
Switching from swa to swn widens the content box by the scrollbar width. If the bar appears and disappears on hover or state changes, the content jitters, so it is safer to pick one and keep it.
swn does not disable scrolling
To actually stop scrolling, use an overflow class such as oh. swn only removes the visible bar.
Accessibility Note
Hiding the scrollbar with swn removes the visual indicator of scrollability. Provide a separate hint that the content is scrollable. Keyboard scrolling still works, so giving the container a tabindex lets people scroll it once focused.