Description
Attempts to unify the (relatively) new CSS standard
scrollbar-width: *;
(MDN) and scrollbar-color: * *;
(MDN) with the non-standard, but comically much better supported,::-webkit-scrollbar
styles (MDN).
Accessibility Concern
Setup
Demo
For reference, an example of standard scroll bars:
You may need to show scrollbars in your operating system settings, but then as a web developer, you already had your scrollbars always visible, didn't you? 😉
The following demos show horizontal scrollbars - the styles will apply to scrollbars in both directions.
Thin scrollbars
Attempts to unify scrollbar-width: thin;
(MDN) and the corresponding ::-webkit-scrollbar
styles.
On this plugin authors Mac, running Mac OS Big Sur and FireFox 95 -
scrollbar-width: thin;
draws a scrollbar that is
10px
wide with a 2px
internal padding.
And so, as well as setting scrollbar-width: thin;
,
scrollbar-thin
alters the scrollbars to match those numbers.
Thin scrollbars - collapsed
scrollbar-thin-collapse
takes advantage of the ability to
collapse the padding around the scrollbar thumb for browsers that support
::-webkit-scrollbar
. For other browsers, this sets
scrollbar-width: thin;
as above.
Hidden scrollbars
Possible, using scrollbar-none
, unifies
scrollbar-width: none;
and the equivalent
::-webkit-scrollbar
display: none;
.
Scrollbar colours
Attempts to unify scrollbar-color: * *;
(MDN) and the corresponding ::-webkit-scrollbar
styles.
Scrollbar track colour
Scrollbar track colour takes its values from your Tailwind config colors. It
creates classes from theme.colors
and
theme.scrollbarColor.track
and also name spaced and
theme.backgroundColor
.
From theme.theme.scrollbar.trackColor
, using the config in this
document:
Scrollbar thumb colour
Scrollbar track colour takes its values from your Tailwind config colors. It
creates classes from theme.colors
and
theme.scrollbarColor.thumb
and also name spaced and
theme.backgroundColor
.
From theme.theme.scrollbar.thumbColor
, using the config in this
document:
Combining scrollbar-
classes
Variations of combinations of
scrollbar-thin
/scrollbar-thin-collapsed
,
scrollbar-track-*
and scrollbar-thumb-*
Using scrollbar-track-*
and scrollbar-thumb-*
:
Using scrollbar-thin
, scrollbar-track-*
and
scrollbar-thumb-*
:
Using scrollbar-thin-collapse
,
scrollbar-track-*
and scrollbar-thumb-*
:
Using theme.colors
tokens as colour names:
Using theme.backgroundColor
tokens as colour names, note the
bg-
colour name prefix: