Scrollbar
/SKROHL-bar/ · noun · NAV pattern · #098
The thin bar along the edge of a scrolling area that shows how far down you are and how much is left. The part you drag is the thumb; the groove it slides in is the track. Phones and Macs often hide it until you scroll.
Also called: scroll bar, scroll indicator, scroll thumb.
You might call it
- “the bar on the side of the screen”
- “the bar on the right side of the screen”
- “the thing you drag to move down the page”
- “the scroll bar on the side of the screen”
- “the grey bar that shows where you are on the page”
…its name is Scrollbar.
Common questions
What is the bar on the side of the screen called?
The scrollbar. It runs along the right edge (or the bottom, for sideways scrolling) and shows where you are in a long page. The piece you drag is the thumb and the channel it moves in is the track. On a Samsung phone, a tab on the edge that opens shortcuts is the Edge panel instead.
Why does the scrollbar disappear on Mac and phones?
They use overlay scrollbars that only appear while you scroll and fade afterwards, to save space. On a Mac you can keep them visible in System Settings › Appearance › Show scroll bars › Always. Windows and most Linux desktops show classic scrollbars that take up their own width.
In code
| Web (CSS) | overflow: auto scrollbar-width scrollbar-color scrollbar-gutter |
|---|---|
| SwiftUI | ScrollView .scrollIndicators(_:) |
| UIKit | UIScrollView showsVerticalScrollIndicator |
| Jetpack Compose | Modifier.verticalScroll No scrollbar is drawn on Android by default |
| Android (Views) | android:scrollbars ScrollView |
| Flutter | Scrollbar CupertinoScrollbar |
Prompt for your AI coding tool
Style the scrollbars in this app’s scrolling panels to match the theme: a thin thumb in a muted color that darkens on hover, on a transparent track, using scrollbar-width and scrollbar-color with a ::-webkit-scrollbar fallback. Reserve space with scrollbar-gutter: stable so content does not shift when a scrollbar appears, and never hide the scrollbar on an area that can only be scrolled with it.
More UI words to use when vibe coding →
Related patterns
All the parts of a website, named →