CSS Scrollbar Customizada

Customizing scrollbars across Chromium, WebKit and Firefox

Scrollbars are one of the last UI elements that browsers paint with operating-system defaults — and one of the first ones designers want to brand. There are two parallel APIs to know: the older WebKit/Blink prefix pseudo-elements that work in Chrome, Edge, Safari and Opera, and the newer CSS Scrollbars Module (W3C standardized) implemented in Firefox and progressively rolling out elsewhere. Modern projects use both, side-by-side, for full coverage.

The standardized API is two properties:

.scrollable {
  scrollbar-width: thin;        /* auto | thin | none */
  scrollbar-color: #4f46e5 #f3f4f6; /* thumb track */
}

WebKit/Blink offers finer-grained control through pseudo-elements:

.scrollable::-webkit-scrollbar       { width: 8px; height: 8px; }
.scrollable::-webkit-scrollbar-track { background: #f3f4f6; }
.scrollable::-webkit-scrollbar-thumb { background: #4f46e5; border-radius: 4px; }
.scrollable::-webkit-scrollbar-thumb:hover { background: #4338ca; }

Avoiding layout shift with scrollbar-gutter

When content grows past the viewport and a scrollbar appears, the content area shrinks by 15-17px — a janky reflow. The scrollbar-gutter: stable property (Chrome 94+, Firefox 97+) reserves the space upfront so the layout never jumps. Combine with stable both-edges to keep visual symmetry on RTL languages.

Platform conventions you should not fight

macOS auto-hides scrollbars when the trackpad is idle and shows them only during scroll. Trying to force a permanent scrollbar there makes the site feel un-native. iOS and Android render scrollbars as ephemeral overlays — your ::-webkit-scrollbar rules are mostly ignored on mobile, so focus the visual design on desktop. Windows traditionally shows persistent scrollbars but Windows 11 moved towards auto-hide too.

Anti-patterns and accessibility

• Invisible scrollbars (scrollbar-width: none) remove the user's clue that the area is scrollable. If you must, add a visible mask-image fade at the edges or a "more" indicator.
• Too thin to grab. Users with motor impairment need a target close to the 24x24 CSS pixel minimum hinted by WCAG 2.5.8 Target Size. A 4px scrollbar is fashionable but unusable.
• Track and thumb in the same color — looks minimal but kills affordance. Maintain at least 3:1 contrast between thumb and track per WCAG 1.4.11.
• Loud colors on every scrollbar — fine for a hero section, exhausting on a data table.

Apple Music style overlay scrollbar

A popular design is a thin idle scrollbar that grows on hover. With WebKit:

.scrollable::-webkit-scrollbar { width: 6px; transition: width .2s; }
.scrollable:hover::-webkit-scrollbar { width: 12px; }

FAQ

Do I need both the Firefox properties and the WebKit pseudo-elements? Yes, until parity arrives. Browsers ignore rules they do not understand, so writing both blocks is safe and gives you full coverage on every engine.

How do I completely hide the scrollbar but keep the scrolling working? Use scrollbar-width: none (Firefox) and ::-webkit-scrollbar { display: none } (Chrome/Safari). Wheel, touch and keyboard scrolling keep working. Make sure to add a visible scroll affordance.

Can I style a horizontal scrollbar differently? Yes — target ::-webkit-scrollbar:horizontal and ::-webkit-scrollbar:vertical separately. Firefox does not expose orientation hooks; the same scrollbar-color applies to both.

Should I use a JavaScript polyfill like SimpleBar? Only if you need an overlay scroll on every platform regardless of OS settings. For most sites, the CSS approach is enough, ships nothing extra and stays accessible by default.