Scrollbar

Anatomy

│ Content area                     │
│ Content area          ┌──┐       │  ← Thumb
│ Content area          │  │       │     Rounded, 12px wide
│ Content area          └──┘       │
│                         │        │  ← Track: transparent
│                         │        │

1. Track — Scrollbar background area, transparent (background: transparent)
2. Thumb — Draggable scroll indicator, 12 px wide, radius --ds-radius-full
3. Scroll Container — The overflow: auto/scroll container holding overflow content

Usage Guidelines

✅ Do

• Apply the custom scrollbar style consistently to all scroll areas in the design system
• Keep the scrollbar style subtle and unobtrusive, so it doesn't interfere with content reading
• Consider touch scroll momentum on mobile (scroll-behavior: smooth)
• Ensure the thumb height is sufficient to clearly indicate scroll position

❌ Don't

• Don't completely hide the scrollbar — users need to know content is scrollable (overflow: hidden hides the scrollbar)
• Don't use overly bright or high-contrast scrollbar colors — distracting
• Don't modify scrollbar behavior logic, only its visual style
• Don't use a thumb that's too thin (< 6 px) — hard to drag precisely on touch

Interaction Behavior

Accessibility