scrollbar scroll overflow custom webkit style scrollbar to match design system subtle scrollbar for sidebars or code blocks consistent scrollbar appearance across browsers default browser scrollbar clashes with design need thin scrollbar without hiding it completely scrollbar looks different across browsers
Custom Scrollbar
Fetch snippet JSON:
curl https://webspire.de/snippets/interactions/scrollbar.json Background
Customize
Quick Start
<div class="custom-scrollbar overflow-y-auto max-h-64">Scrollable content</div>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- A11y
- prefers-color-scheme
- Size
- 875 bytes · 34 lines
- Custom Properties
-
--scrollbar-width--scrollbar-track--scrollbar-thumb--scrollbar-thumb-hover - Classes
-
.custom-scrollbar
scrollbar scroll overflow custom webkit
Apply .custom-scrollbar to any scrollable container. Uses the modern scrollbar-color property with -webkit-scrollbar fallback for full cross-browser support.
Customize via CSS custom properties:
--scrollbar-width— scrollbar thickness (default:0.5rem)--scrollbar-track— track background color--scrollbar-thumb— thumb color--scrollbar-thumb-hover— thumb hover color
Dark mode colors are applied automatically via prefers-color-scheme.