Scrollbar
Style scrollbars using the CSS standard scrollbar-color, scrollbar-width, and scrollbar-gutter properties. Works across all major browsers without vendor-specific pseudo-elements.
Import
Included in @import 'tw-jib-css'. To import individually:
@import 'tw-jib-css/scrollbar';Quick Reference
| Class | Styles |
|---|---|
| scrollbar-auto | scrollbar-color: auto |
| scrollbar-thumb-<color> | --tw-scrollbar-thumb: <color>; scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track) |
| scrollbar-thumb-<color>/<opacity> | --tw-scrollbar-thumb: <color> at <opacity>% opacity |
| scrollbar-track-<color> | --tw-scrollbar-track: <color>; scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track) |
| scrollbar-track-<color>/<opacity> | --tw-scrollbar-track: <color> at <opacity>% opacity |
| scrollbar-width-auto | scrollbar-width: auto |
| scrollbar-width-thin | scrollbar-width: thin |
| scrollbar-width-none | scrollbar-width: none |
| scrollbar-gutter-auto | scrollbar-gutter: auto |
| scrollbar-gutter-stable | scrollbar-gutter: stable |
| scrollbar-gutter-stable-both | scrollbar-gutter: stable both-edges |
Basic Usage
Add scrollbar styling to any scrollable container:
Scroll this container to see the styled scrollbar.
The thumb is blue and the track is light gray.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco.
Duis aute irure dolor in reprehenderit in voluptate velit esse.
Excepteur sint occaecat cupidatat non proident.
Sunt in culpa qui officia deserunt mollit anim id est laborum.
Thumb and Track Colours
Set the thumb (draggable handle) and track (background rail) colours independently:
Indigo thumb + track
Dark thumb, transparent track
The default thumb colour is #7d7d7d and the default track is transparent.
Opacity
Control thumb and track opacity with the slash modifier:
thumb /100
thumb /50
thumb /25 track /50
Width
Control scrollbar thickness:
auto
thin
none (still scrollable)
Gutter
Reserve space for the scrollbar to prevent layout shifts when content becomes scrollable:
scrollbar-gutter-stable
Space reserved even with no overflow.
scrollbar-gutter-stable-both
Space on both sides for symmetry.
Using a custom value
Use the scrollbar-thumb-[<value>] syntax to set scrollbar colours based on a completely custom value:
Custom scrollbar colours via arbitrary values.
Using a custom variable
For CSS variables, you can also use the scrollbar-thumb-(--custom-property) syntax:
Thumb and track colours from CSS variables.
This is just a shorthand for scrollbar-thumb-[var(--brand-color)] that adds the var() function for you automatically.
Applying conditionally
Hover and focus states
Prefix a scrollbar utility with a state variant like hover:* to only apply it in that state:
Hover to change thumb colour.