Scrollbar Styling with ::-webkit-scrollbar
Customize scrollbar appearance using webkit pseudo-elements and the scrollbar-color property.
Scrollbar Styling Overview
Browsers render default scrollbars that differ across operating systems. CSS allows customizing scrollbar appearance using non-standard webkit pseudo-elements and the modern standard properties.
::-webkit-scrollbar
The root pseudo-element for the entire scrollbar. Set width (vertical) and height (horizontal):
::-webkit-scrollbar {
width: 8px; /* vertical scrollbar width */
height: 8px; /* horizontal scrollbar height */
}All lessons in this course
- overflow: hidden scroll auto clip
- scroll-behavior: smooth
- scroll-snap-type and scroll-snap-align
- Scrollbar Styling with ::-webkit-scrollbar