Scrollbar

Utility wrapper that applies Material Design 3 themed scrollbar styles to overflow content. Not intended to alter scrolling mechanics or replace native accessibility behavior.

Basic Usage

Wrap long content to show a vertical scrollbar. This preserves native scrolling while aligning visuals with MD3 tokens.

Scrollable content line 1

Scrollable content line 2

Scrollable content line 3

Scrollable content line 4

Scrollable content line 5

Scrollable content line 6

 
<ds-scrollbar style="block-size: 160px">
  <div style="block-size: 420px">...</div>
</ds-scrollbar>

Initial Value

Initialize with direction, color, and size attributes.

Secondary thick scrollbar sample.

Scroll to inspect thumb style.

Additional sample line.

Additional sample line.

Variants

Adjust size and direction for different layout needs.

Sizes

Thin size
Medium size
Thick size

Directions

Horizontal scrolling content extends beyond the viewport.
Both axes enabled.

States

Use color and hover visibility states.

Hover state (default)
Always visible state

Interactive Example

Toggle size, color, and direction live.

Interactive scrollbar region 
Event log:

API

Attributes

Attribute Type Default Description
size string medium thin, medium, thick.
color string primary Scrollbar thumb color mapping.
hover boolean true Hover-only visibility toggle.
direction string vertical vertical, horizontal, both.

Events

Event Detail Description
None - Utility component emits no custom events.

CSS Parts

Part Description
container Scrollable content wrapper.

Methods

Method Description
getScrollbarSize() Returns active scrollbar size token expression.
getColorVariable() Returns active color variable name.
getHoverOpacity() Returns hover-state opacity value.

CSS Custom Properties

Property Description
--ds-scrollbar-size-thin Thin scrollbar thickness fallback mapping.
--ds-scrollbar-size-medium Medium scrollbar thickness fallback mapping.
--ds-scrollbar-size-thick Thick scrollbar thickness fallback mapping.

Accessibility

  • Preserves native scroll behavior and keyboard scrolling.
  • Does not alter semantic structure of slotted content.
  • Supports screen readers through normal DOM flow.

Usage Guidelines

  • Set explicit container dimensions on ds-scrollbar.
  • Use direction="both" only when necessary.
  • Prefer hover="false" for always-visible data-heavy views.
  • Choose color variants with sufficient contrast.