::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
::-webkit-scrollbar {
-webkit-appearance: none;
width: 7px;
}
::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: rgba(0,0,0,.5);
-webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}
scrollbar: default (visible)
scrollbar-hidden: hidden mode (invisible but still scrollable)
scrollbar-auto: auto mode (visible)
scrollbar-width-{spacing}: width of scrollbar
scrollbar-track-{color}: color of track/bar
scrollbar-thumb-{color}: color of thumb/handle
scrollbar-track-radius-{borderRadius}: border radius of track/bar
scrollbar-thumb-{color}: border radius of thumb/handle
then there are variants for above properties such as: hover, color, x, y
/* hover*/
hover:scrollbar-hidden /* hidden mode on hover */
hover:scrollbar-auto /* auto mode on hover */
hover:scrollbar-width-{spacing} /* width of scrollbar on hover */
hover:scrollbar-track-{color} /* track/bar color on hover */
hover:scrollbar-thumb-{color} /* thumb/handle of the bar color on hover */
hover:scrollbar-track-radius-{borderRadius} /* radius of track/bar on hover */
hover:scrollbar-thumb-{color} /* radius of thumb/handle on hover */
/* hover variant */
hover:scrollbar-width-x-{spacing} /* width of horizontal bar on hover */
hover:scrollbar-width-y-{spacing} /* width of vertical bar on hover */
hover:scrollbar-track-x-{color} /* color of horizontal track on hover */
hover:scrollbar-track-y-{color} /* color of vertical track on hover */
hover:scrollbar-thumb-x-{color} /* color of thumb of horizontal bar on hover */
hover:scrollbar-thumb-y-{color} /* color of thumb of vertical bar on hover */
/* auto */
scrollbar-auto_width-{spacing} /* width when in auto mode */
scrollbar-auto_width-x-{spacing} /* width of horizontal bar when in auto mode */
scrollbar-auto_width-y-{spacing} /* width of vertical bar when in auto mode */
scrollbar-auto-track-{color} /* color of track when in auto mode */
scrollbar-auto-track-x-{color} /* color of horizontal track when in auto mode */
scrollbar-auto-track-y-{color} /* color of vertical track when in auto mode */
scrollbar-auto-thumb-{color} /* color of thumb when in auto mode */
scrollbar-auto-thumb-x-{color} /* color of thumb of horizontal bar when in auto mode */
scrollbar-auto-thumb-y-{color} /* color of thumb of vertical bar when in auto mode */
/* auto on hover */
hover:scrollbar-auto_width-{spacing} /* width when auto on hover */
hover:scrollbar-auto_width-x-{spacing} /* width of horizontal bar when in auto mode on hover */
hover:scrollbar-auto_width-y-{spacing} /* width of vertical bar when in auto mode on hover */
hover:scrollbar-auto-track-{color} /* color of track when in auto mode on hover */
hover:scrollbar-auto-track-x-{color} /* color of horizontal track when in auto mode on hover */
hover:scrollbar-auto-track-y-{color} /* color of vertical track when in auto mode on hover */
hover:scrollbar-auto-thumb-{color} /* color of thumb when in auto mode on hover */
hover:scrollbar-auto-thumb-x-{color} /* color of thumb of horizontal bar when in auto mode on hover */
hover:scrollbar-auto-thumb-y-{color} /* color of thumb of vertical bar when in auto mode on hover */