[csswg-drafts] [css-scrollbars-1] Add scrollbar-style property for overlay scrollbars (#13218)

arif891 has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-scrollbars-1] Add scrollbar-style property for overlay scrollbars ==
## 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:

```css
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:

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

Developers could use:

```css
/* 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:

```css
/* 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/)](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

```css
/* 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:

```css
.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?
   ```css
   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

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

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

### 2. Use scrollbar-gutter

```css
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

```css
-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

<!-- If you find related CSSWG issues, link them here -->

## References

- [[CSS Scrollbars Styling Module Level 1](https://drafts.csswg.org/css-scrollbars-1/)](https://drafts.csswg.org/css-scrollbars-1/)
- [[MDN: scrollbar-width](https://developer.mozilla.org/en-US/docs/Web/CSS/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)](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)](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.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/13218 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Sunday, 14 December 2025 06:46:50 UTC