[css-scrollbars-1] Add `scrollbar-style` property for `overlay` scrollbars

[arif891]

Summary

Proposal to add a scrollbar-style property to CSS Scrollbars Module Level 1, allowing authors to request overlay scrollbars on Windows. This addresses critical accessibility and user experience issues where developers currently hide scrollbars completely to achieve immersive designs.

Problem Statement

Chrome on Windows uses fixed-width scrollbars that occupy layout space (15-17px gutter). This creates three distinct problems affecting accessibility, cross-platform consistency, and performance:

1. Accessibility Issues: Forced Choice Between Design and Accessibility

Websites with full-bleed hero sections (gradients, images, videos) find that visible scrollbars create visual imbalance. The current workaround is to hide scrollbars entirely using scrollbar-width: none, which removes important navigation cues for users who:

• Rely on scrollbar presence to understand page length
• Have motor difficulties and depend on scrollbar interaction
• Use assistive technologies that reference scrollbar position

Real-world examples hiding scrollbars for design reasons:

• https://www.creativegiants.art
• https://amritpalace.com
• https://untold.site
• https://iventions.com
• https://www.davidalaba.com
• https://www.bittercreek.studio
• https://www.eathungrytiger.com
• https://www.myhealthprac.com
• https://capsules.moyra.co
• https://tobacco.nl
• https://www.graphichunters.com
• https://elementis.co

These are award-winning websites from awwwards.com, demonstrating this is a widespread professional need.

2. Cross-Platform Layout Bugs

Developers working on macOS (which has overlay scrollbars) often don't account for scrollbar width when designing layouts. This causes horizontal overflow issues on Windows where the scrollbar consumes layout space.

Example experiencing overflow:

• https://titangatequity.com (horizontal content overflow due to unaccounted scrollbar width)

3. Performance and UX Issues from Custom Implementations

To achieve overlay scrollbars, some developers implement custom JavaScript-based scrollbars. These solutions:

• Degrade scroll performance
• Provide inconsistent UX compared to native scrollbars
• Often fail to support accessibility features (keyboard navigation, screen readers)
• Break expected browser behaviors

Examples using custom scrollbar implementations:

• https://landonorris.com
• https://silver-pinewood.com
• https://savor.it
• https://blueyard.com
• https://thelinestudio.com

Cross-Browser Landscape

This proposal aims to bring Chrome's Windows behavior in line with other major browsers:

• Firefox on Windows: Uses overlay scrollbars by default
• Safari/WebKit: Uses overlay scrollbars across all platforms
• Chrome on Windows: Uses fixed scrollbars in gutter (outlier)
• Chrome on macOS: Uses overlay scrollbars (system default)

The inconsistency creates cross-platform development challenges and forces developers to choose suboptimal workarounds.

Proposed Solution

Add a new CSS property to control scrollbar rendering behavior:

scrollbar-style: auto | overlay

Values

• auto (default): Current behavior. Scrollbar is rendered in the scrollbar gutter and affects layout.
• overlay: Scrollbar renders over content without affecting layout, similar to macOS behavior. Scrollbar auto-hides when not in use.

Example Usage

Instead of hiding scrollbars completely:

/* Current problematic approach */
:root {
    scrollbar-width: none; /* Hides scrollbar, breaks accessibility */
}

Developers could use:

/* Proposed solution */
:root {
    scrollbar-style: overlay;
    scrollbar-color: rgba(0, 0, 0, 0.3) transparent;
    scrollbar-width: thin;
}

This maintains scrollbar functionality while achieving the desired visual effect.

Applicability

The property should apply to any scrollable element:

/* Works on root */
:root {
    scrollbar-style: overlay;
}

/* Works on scrollable containers */
.scrollable-panel {
    scrollbar-style: overlay;
    overflow: auto;
}

Benefits

1. Accessibility: Scrollbars remain visible and functional, preserving navigation cues
2. Cross-browser Consistency: Aligns Chrome behavior with Firefox and Safari
3. No Breaking Changes: Default value auto maintains current behavior
4. Performance: Eliminates need for JavaScript-based scrollbar implementations
5. Developer Experience: Reduces cross-platform bugs and testing burden
6. User Choice: Developers can choose appropriate behavior per design context

Specification Integration

This property fits naturally into the [CSS Scrollbars Styling Module Level 1](https://drafts.csswg.org/css-scrollbars-1/), which already defines:

• scrollbar-width: Controls scrollbar thickness
• scrollbar-color: Controls scrollbar colors

The scrollbar-style property would complement these by controlling rendering behavior.

Interaction with Existing Properties

/* Complete scrollbar styling */
.element {
    scrollbar-style: overlay;        /* Rendering behavior (new) */
    scrollbar-width: thin;            /* Size (existing) */
    scrollbar-color: #888 transparent; /* Color (existing) */
}

Interaction with scrollbar-gutter

scrollbar-gutter reserves space for scrollbars. With scrollbar-style: overlay, the gutter would not be used since the scrollbar renders over content. Consider:

.element {
    scrollbar-style: overlay;
    scrollbar-gutter: stable; /* Should this be ignored? */
}

Suggested behavior: When scrollbar-style: overlay is set, scrollbar-gutter values other than auto should have no effect, since overlay scrollbars don't need reserved space.

Open Questions

1. System Preferences: Should scrollbar-style: overlay respect Windows "Always show scrollbars" setting?

   • Suggested answer: Yes, system accessibility preferences should override author styles

2. Default Value: Should there be a system value that defers to OS defaults?

   scrollbar-style: auto | overlay | system

   Where system would use overlay on macOS/Linux and auto on Windows by default?

3. Auto-hide Behavior: Should overlay scrollbars always auto-hide, or should there be control over this?

4. Scrollbar Track: For overlay scrollbars, should the track be visible at all times, or only on hover?

5. Transition States: Should there be author control over fade-in/fade-out timing for overlay scrollbars?

Implementation Considerations

For Browser Implementers

• Overlay scrollbars should auto-hide when not actively scrolling
• Should appear on hover over scrollable area
• Should respect system accessibility settings (e.g., "Always show scrollbars" on Windows)
• Should support both mouse and touch interactions
• Should work with existing scrollbar-width (thin/auto) and scrollbar-color properties

Testing

Test cases should verify:

• Layout is unaffected by overlay scrollbars (no reflow)
• Scrollbars remain accessible via keyboard and assistive technologies
• System accessibility preferences override author styles
• Interaction between scrollbar-style, scrollbar-width, and scrollbar-color
• Behavior with nested scrollable containers
• RTL (right-to-left) language support

Alternatives Considered

1. Extend scrollbar-width

scrollbar-width: none | thin | auto | overlay;

Rejected because: scrollbar-width is about sizing, not rendering behavior. Mixing concerns reduces clarity.

2. Use scrollbar-gutter

scrollbar-gutter: stable overlay;

Rejected because: scrollbar-gutter is about reserving space, not controlling rendering mode. The property already has defined behavior that doesn't align with this use case.

3. Browser-specific prefixes

-webkit-scrollbar-style: overlay;

Rejected because: This is a cross-browser need requiring standardization, not a proprietary feature.

4. Do Nothing (Status Quo)

Rejected because: Forces developers into accessibility-hostile workarounds (hiding scrollbars) or performance-degrading custom implementations.

Privacy and Security Considerations

No anticipated privacy or security concerns. This property only affects visual rendering of scrollbars, not their functionality or data access. Similar to how scrollbar-color and scrollbar-width don't introduce security concerns.

Stakeholder Feedback

This proposal is informed by:

• Analysis of 18+ award-winning websites demonstrating current workarounds
• Cross-browser behavior analysis (Firefox, Safari already support overlay scrollbars on Windows)
• Accessibility considerations (maintaining scrollbar visibility)
• Performance considerations (avoiding custom JavaScript implementations)

Related Issues and Discussions

References

• [CSS Scrollbars Styling Module Level 1](https://drafts.csswg.org/css-scrollbars-1/)
• [MDN: scrollbar-width](https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-width)
• [MDN: scrollbar-color](https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color)
• [MDN: scrollbar-gutter](https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-gutter)

Conclusion

The scrollbar-style property addresses a real pain point in modern web design by providing a standards-based solution for overlay scrollbars. This eliminates the current forced choice between visual design and accessibility, aligns Chrome's behavior with Firefox and Safari, and removes the need for performance-degrading custom implementations.

We believe this addition would significantly benefit the web platform and respectfully request the CSS Working Group's consideration.

---

Note: I'm happy to provide additional information, write specification text, or help with test cases if this proposal moves forward. Thank you for considering this feature request.