How to Customize Scrollbars with CSS: A Full Guide

Introduction

Default browser scrollbars often conflict pinch a site’s ocular design, and styling them requires 2 abstracted approaches: the W3C modular properties (scrollbar-width, scrollbar-color, scrollbar-gutter) and the -webkit-scrollbar pseudo-element family supported by Chromium and WebKit. The W3C published the CSS Scrollbars Level 1 specification successful September 2018; some approaches are now broadly supported crossed existent browsers.

Two norm sets are still needed because the modular properties and the -webkit-scrollbar attack screen overlapping but not identical characteristic sets. Live compatibility information is disposable astatine caniuse.com/css-scrollbar.

This tutorial covers some approaches, explains wherever they overlap and wherever they differ, and provides copy-ready patterns for communal UI components including chat windows, sidebars, codification blocks, and modals.

Key Takeaways

• The CSS Scrollbars Level 1 modular properties (scrollbar-width, scrollbar-color, scrollbar-gutter) are the W3C-specified attack and are supported successful Chrome 121+, Firefox 64+, Edge 121+, and existent Safari.
• The -webkit-scrollbar pseudo-element attack is still required for rounded thumbs, civilization way colors, and border-based padding successful Chrome, Safari, and Chromium Edge.
• Firefox does not support -webkit-scrollbar pseudo-elements. Use scrollbar-width and scrollbar-color for Firefox.
• Use @supports (scrollbar-color: auto) to observe modular spot support and scope each artifact explicitly erstwhile isolation is needed.
• scrollbar-gutter: unchangeable prevents layout displacement erstwhile a scrollbar appears aliases disappears by reserving the gutter abstraction successful advance.
• The scrollbar thumb colour must execute astatine slightest a 3:1 opposition ratio against the way colour to meet WCAG 2.1 Non-text Contrast requirements.

Prerequisites

To travel on pinch this article, you will need:

• Familiarity pinch the conception of vendor prefixes
• Understanding of pseudo-elements
• Knowledge of graceful degradation

Browser Compatibility

† Safari support for the modular scrollbar properties reached Baseline “newly available” position successful December 2024. Confirm existent behaviour against caniuse.com/css-scrollbar earlier publishing, arsenic implementation notes are still being updated.

The modular properties now activity successful each awesome browser engines. The ::-webkit-scrollbar pseudo-element family remains the only measurement to use border-radius, civilization way styling, aliases border-based thumb padding successful Chromium and WebKit browsers.

The CSS Scrollbars Level 1 specification defines 3 properties for controlling scrollbar appearance: scrollbar-width, scrollbar-color, and scrollbar-gutter. These properties are now supported successful Chrome 121+, Edge 121+, Firefox 64+, and existent Safari.

scrollbar-width

scrollbar-width controls the rendered size of the scrollbar. Accepted values are auto, thin, and none.

/* scrollbar-width: controls rendered size of the scrollbar */ /* Chrome 121+, Edge 121+, Firefox 64+, Safari - spot compatibility array */ .scroll-area { scrollbar-width: thin; /* car | bladed | nary */ overflow: auto; }

thin renders a narrower barroom than the level default; the nonstop width is wished by the browser and operating strategy and varies crossed environments. car uses the autochthonal level size. nary hides the barroom while leaving scroll functionality intact. The modular spot cannot group an nonstop pixel width: for that you must usage ::-webkit-scrollbar { width }, which is supported successful Chromium and WebKit only.

Browsers enforce a minimum thumb tallness to support the grip grabbable sloppy of contented length. In Chrome this level is astir 32px; successful Firefox astir 18px. A very bladed scrollbar connected a very agelong page will extremity shrinking astatine that point.

scrollbar-color

scrollbar-color sets the thumb and way colors utilizing a two-value syntax. The first worth is the thumb color; the 2nd is the way color. border-radius and padding are not disposable done this property.

/* scrollbar-color: sets thumb and way colors */ /* spot compatibility array */ .scroll-area { height: 200px; overflow: auto; scrollbar-color: blue orange; /* thumb way */ }

Here is simply a screenshot of the scrollbar produced pinch these CSS rules:

scrollbar-gutter

A sheet that loads contented dynamically, specified arsenic a chat feed, a remark list, aliases a select dropdown, shifts its contented sideways the infinitesimal a scrollbar appears. scrollbar-gutter: unchangeable prevents that displacement by reserving the gutter abstraction earlier the scrollbar renders. The unchangeable both-edges version reserves adjacent abstraction connected some sides, which keeps the layout visually centered successful containers wherever symmetry matters, specified arsenic a paper grid aliases a centered dialog. Accepted values are auto, stable, and unchangeable both-edges.

/* scrollbar-gutter: reserves abstraction for the scrollbar to forestall layout displacement */ /* Chrome 94+, Edge 94+, Firefox 97+, Safari - spot compatibility array */ .scroll-area { scrollbar-gutter: stable; overflow: auto; }

Styling Scrollbars successful Chrome, Edge, and Safari

Styling scrollbars for Chrome, Edge, and Safari is disposable done the vendor-prefixed -webkit-scrollbar pseudo-element family. Here is simply a moving illustration utilizing the 3 most-used pseudo-elements:

body::-webkit-scrollbar { width: 12px; /* width of the full scrollbar */ } body::-webkit-scrollbar-track { background: orange; /* colour of the search area */ } body::-webkit-scrollbar-thumb { background-color: blue; /* colour of the scroll thumb */ border-radius: 20px; /* roundness of the scroll thumb */ border: 3px coagulated orange; /* creates padding astir scroll thumb */ }

Here is simply a screenshot of the scrollbar produced pinch these CSS rules:

The separator connected ::-webkit-scrollbar-thumb is drawn successful the track’s color, which insets the visible thumb and sounds arsenic padding. If you alteration the way color, alteration the thumb separator colour to match, aliases the inset effect breaks and the separator becomes a visible ringing astir the thumb.

This codification useful successful the latest releases of Chrome, Edge, and Safari. The -webkit-scrollbar pseudo-elements are non-standard and not connected the W3C standards track. The CSS Scrollbars Level 1 properties (scrollbar-width, scrollbar-color, scrollbar-gutter) are the W3C-standardized attack and the recommended way going forward. Both tin coexist successful a stylesheet utilizing characteristic queries.

The afloat pseudo-element family is listed beneath for reference:

Hiding the arrow buttons astatine each extremity and styling the scrollbar area are communal needs that ::-webkit-scrollbar unsocial does not address:

/* Hide arrow buttons astatine each extremity of the scrollbar */ /* Chrome, Safari, Edge (Chromium) */ ::-webkit-scrollbar-button { display: none; } /* Style the area wherever some scrollbars meet */ /* Chrome, Safari, Edge (Chromium) */ .code-block::-webkit-scrollbar-corner { background: #1a1a1a; }

Thumb Hover and Active States

To make the thumb respond to interaction, style ::-webkit-scrollbar-thumb:hover and ::-webkit-scrollbar-thumb:active. The modular scrollbar-color spot has nary hover aliases progressive equivalent, truthful this refinement is Chromium and WebKit only.

/* Thumb darkens connected hover - Chrome, Safari, Edge (Chromium) only */ .scroll-area::-webkit-scrollbar-thumb { background-color: #888; } .scroll-area::-webkit-scrollbar-thumb:hover { background-color: #555; } .scroll-area::-webkit-scrollbar-thumb:active { background-color: #333; }

One stylesheet tin service some engines. Each browser silently ignores rules for selectors it does not support, truthful placing the modular properties and the webkit pseudo-elements successful 2 sequential blocks is each that is needed:

/* Standard properties: Chrome 121+, Edge 121+, Firefox 64+ */ body { scrollbar-width: thin; scrollbar-color: blue orange; } /* Webkit pseudo-elements: Chrome, Edge, Safari */ body::-webkit-scrollbar { width: 12px; } body::-webkit-scrollbar-track { background: orange; } body::-webkit-scrollbar-thumb { background-color: blue; border-radius: 20px; border: 3px coagulated orange; }

Avoid utilizing the * cosmopolitan selector for scrollbar rules; it targets each constituent connected the page, including nested scroll containers you whitethorn not intend to style. Scope rules to assemblage for page-level styling aliases to a circumstantial people for component-level styling.

Blink and WebKit browsers disregard rules they do not admit and use -webkit-scrollbar rules. Firefox ignores rules it does not admit and applies CSS Scrollbars rules. The elemental two-block shape useful because browsers silently skip selectors they do not support.

In Chromium, location is 1 further precedence rule: erstwhile immoderate ::-webkit-scrollbar pseudo-element is defined connected an element, Chromium renders the webkit styling for that constituent and ignores scrollbar-color and scrollbar-width connected it. This is element-level behaviour successful Chromium and is why the two-block shape useful cleanly: Firefox takes the modular properties and skips the webkit rules; Chromium takes the webkit rules and skips the modular properties.

For cases wherever definitive scoping is needed, usage @supports characteristic queries:

/* Standard properties wherever supported: Chrome 121+, Edge 121+, Firefox 64+ */ @supports (scrollbar-color: auto) { .scroll-area { scrollbar-width: thin; scrollbar-color: #2563eb #e5e7eb; } } /* Webkit pseudo-elements wherever supported: Chrome, Safari, Edge (all Chromium) */ @supports selector(::-webkit-scrollbar) { .scroll-area::-webkit-scrollbar { width: 10px; } .scroll-area::-webkit-scrollbar-track { background: #e5e7eb; } .scroll-area::-webkit-scrollbar-thumb { background-color: #2563eb; border-radius: 8px; border: 2px coagulated #e5e7eb; } }

The @supports type makes the scoping definitive and avoids cross-engine norm bleed. Use the simpler shape erstwhile targeting modern browsers only; usage @supports erstwhile you request to guarantee isolation.

Overlay and Classic Scrollbars

If your scrollbar styles look to person nary effect, the level is apt utilizing overlay scrollbars. Overlay scrollbars float complete the contented arsenic a semi-transparent thumb pinch nary track, look only while scrolling, and return up nary layout space. macOS defaults to overlay scrollbars for astir users; Windows defaults to classical (always-visible) scrollbars.

In overlay mode, scrollbar-color and webkit way styling often nutrient nary visible result, because the way is not rendered and the thumb quality is managed by the OS. This is the astir communal origin of “why is my styling doing thing connected macOS Safari?” reports and is related to the unfastened questions astir Safari scrollbar-color behaviour connected caller macOS versions.

To logic astir it: classical scrollbars, arsenic seen connected Windows aliases connected macOS erstwhile the strategy penchant is group to ever show scrollbars, respond to some the modular properties and the webkit pseudo-elements. Overlay scrollbars mostly do not. Test connected some scrollbar modes earlier publishing, and do not presume styling will beryllium visible to each users connected each platforms.

Mobile and Touch Scrollbar Behavior

Custom scrollbar styling is mostly a desktop concern. On iOS, Safari uses momentum-based overlay scrollbars during touch scrolling and does not use -webkit-scrollbar styling to them. On Android, Chrome’s scrollbar support is partial and varies by version. In some cases, immoderate styled scrollbar will silently autumn backmost to the level default.

Do not trust connected a styled scrollbar arsenic the only navigation affordance for touch users. Any constituent that requires civilization scrollbar visibility for usability should person an replacement cue astatine the separator of the scroll container, specified arsenic a slice gradient:

/* Touch-friendly cue: slice the bottommost separator to hint astatine much contented */ .scroll-container { overflow-y: auto; -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 24px), transparent); mask-image: linear-gradient(to bottom, black calc(100% - 24px), transparent); }

Dark-Mode Theming pinch Custom Properties

Define scrollbar colors arsenic CSS civilization properties and switch them successful a prefers-color-scheme: acheronian media query. This keeps the colour values successful 1 spot and ensures the scrollbar follows the taxable automatically.

/* Theme scrollbar colors once, switch them for acheronian mode */ :root { --sb-thumb: #888; --sb-track: #f0f0f0; } @media (prefers-color-scheme: dark) { :root { --sb-thumb: #555; --sb-track: #1e1e1e; } } .scroll-area { scrollbar-color: var(--sb-thumb) var(--sb-track); } .scroll-area::-webkit-scrollbar-thumb { background-color: var(--sb-thumb); } .scroll-area::-webkit-scrollbar-track { background: var(--sb-track); }

Hide a Scrollbar While Keeping Scroll Functionality

Hiding a scrollbar without disabling scrolling requires a different attack depending connected the browser.

Hide Scrollbar successful Chrome and Safari

/* Hide scrollbar successful Chrome, Safari, and Chromium-based Edge */ /* Scroll functionality is preserved */ .hide-scrollbar::-webkit-scrollbar { display: none; }

Hide Scrollbar successful Firefox

/* Hide scrollbar successful Firefox */ /* Scroll functionality is preserved */ .hide-scrollbar { scrollbar-width: none; }

Cross-Browser Hide Scrollbar Pattern

/* Cross-browser: hide scrollbar while preserving scroll */ /* Apply overflow: car aliases scroll to the aforesaid constituent */ .hide-scrollbar { overflow: auto; scrollbar-width: none; /* Firefox and modular */ -ms-overflow-style: none; /* IE and pre-Chromium Edge (legacy) */ } .hide-scrollbar::-webkit-scrollbar { display: none; /* Chrome, Safari, Edge (Chromium) */ }

Do not hide scrollbars connected regions that dangle connected them for navigation unless the constituent is keyboard-accessible (focusable and scrollable pinch arrow keys aliases Page Up/Page Down). See the Accessibility Considerations conception for WCAG guidance.

Both the modular properties and the webkit pseudo-elements usage the width axis for vertical scrollbars. Use overflow-y: car connected the instrumentality to trigger them, past power quality pinch scrollbar-width and scrollbar-color for cross-browser sizing and ::-webkit-scrollbar { width } for nonstop power successful Chromium and WebKit.

Vertical Scrollbar Width and Color

/* Vertical scrollbar: modular properties */ /* Chrome 121+, Edge 121+, Firefox 64+, Safari - spot compatibility array */ .vertical-scroll { overflow-y: auto; height: 300px; scrollbar-width: thin; scrollbar-color: #555 #f0f0f0; } /* Vertical scrollbar: webkit pseudo-elements */ /* Chrome, Safari, Edge (Chromium) */ .vertical-scroll::-webkit-scrollbar { width: 8px; } .vertical-scroll::-webkit-scrollbar-track { background: #f0f0f0; } .vertical-scroll::-webkit-scrollbar-thumb { background-color: #555; }

Rounded Thumb Example pinch Code

border-radius connected the thumb requires the ::-webkit-scrollbar-thumb pseudo-element. It is not disposable done the modular scrollbar-color property.

/* Rounded thumb: Chrome, Safari, Edge (Chromium) only */ .rounded-scroll::-webkit-scrollbar { width: 8px; } .rounded-scroll::-webkit-scrollbar-track { background: #f0f0f0; border-radius: 4px; } .rounded-scroll::-webkit-scrollbar-thumb { background-color: #0a84ff; border-radius: 20px; border: 2px coagulated #f0f0f0; /* separator matches way to create ocular padding */ }

The thumb accepts immoderate CSS inheritance value, including gradients. Because a gradient is an image, group it pinch inheritance aliases background-image, not background-color. For example, background: linear-gradient(to bottom, #0a84ff, #0055cc) produces a gradient thumb successful Chromium and WebKit.

How to Style a Horizontal Scrollbar pinch CSS

For the -webkit-scrollbar pseudo-element, tallness (not width) controls the horizontal scrollbar. width controls the vertical scrollbar.

/* Horizontal scrollbar: modular properties */ /* Chrome 121+, Edge 121+, Firefox 64+, Safari - spot compatibility array */ .horizontal-scroll { overflow-x: auto; overflow-y: hidden; white-space: nowrap; scrollbar-width: thin; scrollbar-color: #0a84ff #e0e0e0; } /* Horizontal scrollbar: webkit pseudo-elements */ /* Chrome, Safari, Edge (Chromium) */ /* Use height, not width, for the horizontal barroom */ .horizontal-scroll::-webkit-scrollbar { height: 6px; } .horizontal-scroll::-webkit-scrollbar-track { background: #e0e0e0; } .horizontal-scroll::-webkit-scrollbar-thumb { background-color: #0a84ff; border-radius: 10px; }

Practical Use Cases

The pursuing patterns are scoped to circumstantial classes truthful they use only to the intended container, not the full page. Each shape includes some modular properties and webkit pseudo-elements.

Chat Window aliases Message Feed

A chat feed’s scrollbar should enactment unobtrusive until the personification reaches for it. A transparent way keeps the barroom invisible astatine rest; a constrictive thumb that darkens connected hover makes it look only erstwhile needed. The hover authorities requires ::-webkit-scrollbar-thumb:hover and is Chromium and WebKit only.

/* Chat window: constrictive scrollbar, transparent track, hover darkening */ /* Standard: Chrome 121+, Edge 121+, Firefox 64+ | Webkit: Chrome, Safari, Edge */ .chat-window { height: 400px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #b0b0b0 transparent; } .chat-window::-webkit-scrollbar { width: 6px; } .chat-window::-webkit-scrollbar-track { background: transparent; } .chat-window::-webkit-scrollbar-thumb { background-color: #b0b0b0; border-radius: 10px; } .chat-window::-webkit-scrollbar-thumb:hover { background-color: #888; /* darkens connected hover truthful the barroom surfaces connected request */ }

Sidebar Navigation

A sidebar that supports a switchable light/dark taxable should specify scrollbar colors arsenic CSS civilization properties connected the component, not arsenic hard-coded hex values. That measurement a azygous taxable switch updates the scrollbar automatically without rubbing this block.

/* Sidebar navigation: acheronian theme, colors via CSS civilization properties */ /* Standard: Chrome 121+, Edge 121+, Firefox 64+ | Webkit: Chrome, Safari, Edge */ .sidebar { --sb-thumb: #555; --sb-track: #1e1e1e; width: 240px; height: 100vh; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--sb-thumb) var(--sb-track); } .sidebar::-webkit-scrollbar { width: 5px; } .sidebar::-webkit-scrollbar-track { background: var(--sb-track); } .sidebar::-webkit-scrollbar-thumb { background-color: var(--sb-thumb); border-radius: 4px; }

Code Editor Block

Code blocks scroll connected some axes and often beryllium wrong a acheronian theme. Setting adjacent width and tallness connected ::-webkit-scrollbar keeps some bars the aforesaid thickness. The ::-webkit-scrollbar-corner fills the spread wherever the 2 bars meet; without it, that area renders arsenic a achromatic quadrate against a acheronian background.

/* Code editor block: acheronian scrollbar connected some axes pinch area capable */ /* Standard: Chrome 121+, Edge 121+, Firefox 64+ | Webkit: Chrome, Safari, Edge */ .code-block { overflow: auto; max-height: 300px; scrollbar-width: thin; scrollbar-color: #4a4a4a #1a1a1a; } .code-block::-webkit-scrollbar { width: 8px; height: 8px; /* tallness controls the horizontal barroom */ } .code-block::-webkit-scrollbar-track { background: #1a1a1a; } .code-block::-webkit-scrollbar-thumb { background-color: #4a4a4a; border-radius: 4px; border: 2px coagulated #1a1a1a; /* separator matches track; insets the thumb visually */ } .code-block::-webkit-scrollbar-corner { background: #1a1a1a; /* fills the spread wherever some bars meet */ }

Modal aliases Dialog Overlay

When a modal opens and its assemblage overflows, a scrollbar tin look and displacement the matter sideways. Adding scrollbar-gutter: unchangeable reserves the gutter width earlier contented renders, preventing the layout jump moreover erstwhile the scrollbar is not yet visible.

/* Modal contented area: scoped scrollbar, gutter reserved to forestall layout displacement */ /* Standard: Chrome 121+, Edge 121+, Firefox 64+ | Webkit: Chrome, Safari, Edge */ .modal-body { max-height: 60vh; overflow-y: auto; scrollbar-gutter: stable; /* reserves gutter truthful contented does not displacement connected overflow */ scrollbar-width: thin; scrollbar-color: #999 #f5f5f5; } .modal-body::-webkit-scrollbar { width: 6px; } .modal-body::-webkit-scrollbar-track { background: #f5f5f5; } .modal-body::-webkit-scrollbar-thumb { background-color: #999; border-radius: 6px; }

Conditionally hiding aliases showing scrollbars tin beryllium achieved utilizing CSS media queries aliases JavaScript. You mightiness want to hide scrollbars connected smaller screens wherever contented fits wrong the viewport, but show them connected larger screens wherever contented overflows.

@media (max-width: 768px) { body { overflow: hidden; /* Disables scrolling wholly connected smaller screens - not a scrollbar-hiding method */ } } @media (min-width: 769px) { body { overflow: auto; /* Shows the scrollbar connected larger screens */ } }

To hide only the visible scrollbar barroom while preserving scroll functionality, usage the cross-browser .hide-scrollbar shape from Hide a Scrollbar While Keeping Scroll Functionality. At a breakpoint, adhd that people to the scroll instrumentality truthful the rules supra use only wherever you request them:

/* Small viewports: adhd hide-scrollbar to the constituent (class rules defined above) */ @media (max-width: 768px) { .scroll-container { overflow: auto; } }

Hide the scrollbar only erstwhile contented does not overflow by toggling the people successful JavaScript:

// Hide the scrollbar only erstwhile contented does not overflow const el = document.querySelector('.scroll-container'); el.classList.toggle('hide-scrollbar', el.scrollHeight <= el.clientHeight);

Using CSS Scrollbars pinch JavaScript Interactions

The simplest measurement to instrumentality soft scrolling is pinch CSS, requiring nary JavaScript:

/* Smooth scrolling pinch CSS only - nary JavaScript required */ html { scroll-behavior: smooth; }

For programmatic soft scroll to a target constituent connected click:

// Smooth scroll to a target constituent connected click (no room required) document.getElementById('scroll-to-section').addEventListener('click', () => { document.getElementById('target-section').scrollIntoView({ behavior: 'smooth' }); });

Common Errors and Debugging

1. Page Width Shifts When a Scrollbar Appears

When a instrumentality transitions from nary overflow to overflowing content, a classical scrollbar appears and takes astir 15–17px from the layout width connected Windows. The contented area narrows, matter reflows, and the layout jumps. This is astir noticeable connected containers group to afloat viewport width and connected dynamically loaded lists wherever the scrollbar appears aft the first render.

The hole is scrollbar-gutter: stable, which reserves the scrollbar’s gutter abstraction earlier the barroom appears, truthful the contented area width ne'er changes:

CSS without gutter preservation (layout shifts erstwhile scrollbar appears):

.feed { overflow: auto; /* nary scrollbar-gutter: contented reflows erstwhile the barroom appears */ }

CSS pinch gutter preservation (layout stays stable):

.feed { overflow: auto; scrollbar-gutter: stable; /* reserves gutter; contented width does not alteration */ }

If you ever want the scrollbar visible sloppy of contented length, overflow: scroll achieves the aforesaid stableness without requiring scrollbar-gutter, because the scrollbar abstraction is ever occupied.

2. Scrollbar Disappearing pinch overflow: hidden Unintentionally

When the scrollbar disappears unexpectedly, cheque whether overflow: hidden is applied to a genitor element. That spot disables overflow scrolling wholly connected the constituent and its children.

Incorrect HTML and CSS:

<div style="overflow: hidden;"> <div style="overflow: auto;"> <!-- Content that requires a scrollbar --> </div> </div>

Corrected HTML and CSS:

<div> <div style="overflow: auto;"> <!-- Content that requires a scrollbar --> </div> </div>

3. Double Scrollbars from Nested overflow

Two scrollbars look erstwhile a scroll instrumentality is nested wrong different scroll container. The origin is overflow: car (or scroll) group connected some the genitor and the child. The hole is to scroll connected a azygous element, usually the soul contented wrapper, and time off the genitor astatine the default:

Symptom: nested overflow connected genitor and child:

/* Symptom: 2 scrollbars from nested overflow */ .outer { overflow: auto; } /* genitor scrolls */ .inner { overflow: auto; } /* kid besides scrolls: double bars */

Fix: scroll connected 1 constituent only:

/* Fix: scroll connected 1 constituent only */ .outer { overflow: visible; } .inner { overflow: auto; }

Accessibility Considerations

Color Contrast Requirements

WCAG 2.1 Success Criterion 1.4.11 (Non-text Contrast) requires a minimum opposition ratio of 3:1 betwixt a UI constituent and adjacent colors. For a scrollbar, the thumb colour must execute astatine slightest 3:1 opposition against the way color.

• Thumb #767676 connected way #ffffff: astir 4.5:1. Passes.
• Thumb #cccccc connected way #ffffff: astir 1.6:1. Fails.

Use the WebAIM Contrast Checker to verify scrollbar colour pairs earlier publishing.

Respecting User Scrollbar Preferences

Some users configure their operating strategy to ever show scrollbars, aliases person accessibility settings that impact scrollbar rendering. Do not effort to override OS-level accessibility settings pinch CSS.

When hiding a scrollbar pinch scrollbar-width: nary aliases ::-webkit-scrollbar { display: nary }, corroborate that the constituent is keyboard-accessible: it must beryllium focusable and respond to arrow keys, Page Up, and Page Down truthful keyboard-only users tin navigate the content. Avoid hiding the scrollbar connected elements wherever it is the only visible navigation affordance.

FAQ

1. What is the quality betwixt -webkit-scrollbar and the CSS Scrollbars modular properties?

The -webkit-scrollbar attack uses vendor-prefixed pseudo-elements supported successful Chrome, Safari, and Chromium-based Edge. It enables fine-grained styling specified arsenic border-radius connected the thumb and border-based padding astir the thumb. The CSS Scrollbars modular (scrollbar-width, scrollbar-color) is the W3C-specified approach, supported successful Firefox and newer versions of Chrome and Edge. Both tin coexist successful a stylesheet utilizing @supports characteristic queries.

2. Does CSS scrollbar styling activity successful Firefox?

Yes. Firefox supports scrollbar-width and scrollbar-color from the CSS Scrollbars Level 1 specification starting successful type 64. Firefox does not support the -webkit-scrollbar pseudo-element family. Write Firefox styles utilizing the modular properties only.

3. How do I hide a scrollbar successful CSS without disabling scrolling?

Set overflow: car connected the container, past use ::-webkit-scrollbar { display: nary } for Chrome and Safari, and scrollbar-width: nary for Firefox. Do not usage overflow: hidden; it disables scrolling alternatively than hiding only the visible bar.

4. Can I usage border-radius connected a scrollbar thumb?

Yes, but only done the ::-webkit-scrollbar-thumb pseudo-element. Apply border-radius straight to ::-webkit-scrollbar-thumb. This spot is not disposable done the modular scrollbar-color property.

5. Does scrollbar styling impact page layout?

Scrollbars return up layout abstraction by default. The scrollbar-gutter spot controls whether that abstraction is reserved moreover erstwhile the scrollbar is not visible. Setting scrollbar-gutter: unchangeable prevents contented from reflowing erstwhile a scrollbar appears aliases disappears.

6. Are civilization CSS scrollbars accessible?

Custom scrollbars must meet WCAG 2.1 colour opposition requirements. The thumb colour against the way inheritance must person a opposition ratio of astatine slightest 3:1 for non-text UI components. Avoid removing scrollbars wholly connected elements that require them for navigation unless a keyboard-accessible replacement is successful place.

7. Does -webkit-scrollbar activity successful Edge?

Yes. Microsoft Edge is built connected the Chromium motor and supports the afloat -webkit-scrollbar pseudo-element family. CSS written for Chrome applies to Edge without modification.

8. How do I use a civilization scrollbar to only 1 element?

Scope the pseudo-element selector to a circumstantial people aliases ID:

/* Scoped civilization scrollbar: applies only to .my-container */ .my-container::-webkit-scrollbar { width: 8px; } .my-container { scrollbar-width: thin; scrollbar-color: #555 #f0f0f0; }

For modular properties, use scrollbar-width and scrollbar-color straight to the element’s selector.

Conclusion

This tutorial covered really to style scrollbars utilizing the CSS Scrollbars Level 1 modular properties (scrollbar-width, scrollbar-color, scrollbar-gutter) and the -webkit-scrollbar pseudo-element family. It included a cross-browser compatibility reference, the @supports characteristic discovery pattern, vertical and horizontal scrollbar examples, the correct method for hiding a scrollbar while preserving scroll functionality, and scoped styles for communal UI patterns including chat windows, sidebars, codification blocks, and modals.

You tin now constitute scrollbar styles that target Chrome, Firefox, Safari, and Edge without duplicating effort, usage @supports to constitute standards-first CSS pinch a webkit furniture for ocular refinement, scope civilization scrollbar styles to individual components alternatively than the full page, and use colour combinations that fulfill WCAG 2.1 opposition requirements.

To proceed moving pinch CSS pseudo-elements and layout properties, research A CSS Selector Reference for a deeper reference connected the selectors and pseudo-elements utilized passim this tutorial, How To Prevent Line Breaks Using CSS for techniques connected keeping contented connected a azygous statement pinch white-space: nowrap, which pairs straight pinch horizontal scroll containers, and CSS Flexbox for layout techniques that brace pinch scrollbar-gutter to forestall contented reflow.