Scrollbar

Overview

A Scrollbar provides a visual and interactive control for navigating overflowing content vertically or horizontally.

It helps users explore long lists, text, or other areas beyond the visible viewport.

Variants: Vertical · Horizontal

Status: Stable

Owner: Design System Team

When to Use / When Not to Use

Use when:

• Content exceeds visible boundaries and must remain accessible.
• You need precise control over scrollable regions.
• You want to expose scroll feedback (e.g., hover or drag handle).

Avoid when:

• Scrolling can be handled through native system behavior (e.g., short lists).
• You need page-level scrolling only — the browser handles it automatically.
• Your content should use pagination or load more instead of free scrolling.

Anatomy