Scrollbar

The scrollbar allows users to navigate through content that overflows the visible area, providing a visual cue for scrolling and content length.

Overview

The scrollbar allows users to move through content that extends beyond the visible viewport, while signalling how much content is available and where they currently are within it.

Use this component whenever a content area can overflow and users need precise control over their position in that content.

When to use

• Long lists or tables that extend beyond the initial view
• Content panels and sidebars with fixed height
• Any layout where scrollable regions need a consistent, visible affordance

When not to use

• For stepping through discrete values (use a Slider instead)
• For paging through distinct screens or views (use Pagination instead)

Anatomy

The scrollbar is made up of:

1. Track
   The vertical or horizontal rail that represents the full scrollable range.

2. Thumb
   The draggable handle that indicates the user's current position within the scrollable content.

3. Scrollable region
   The content area that the scrollbar controls. The scrollbar visually reflects the proportion between visible content and total content.

Behaviour & interaction

Core behaviour

• Position mapping
  The thumb position corresponds directly to the user's position within the scrollable region.

• Thumb size
  The visual size of the thumb reflects how much of the total content is currently visible.

• Continuous scrolling
  As the user scrolls through the content, the thumb updates continuously to show their current position.

User input

• Pointer interaction
  • Drag the thumb along the track to move through content.
  • The content scrolls in sync with the thumb movement.
• Scroll devices
  • Scrolling via mouse wheel, trackpad, or similar input updates the scrollbar position.
• Focus handling
  • The scrollable region should remain usable when focus is inside it, without unexpected focus loss when the user scrolls.

Product note
The scrollbar is primarily a supporting UI element. Treat it as infrastructure: it should always be available and predictable, but never the primary focus of the experience.

Layout & placement

• Attach to the scrollable region
  The scrollbar should visually align with the content area it controls, avoiding ambiguity about which content is scrollable.

• Consistent positioning
  Use scrollbars consistently across similar layouts (for example, all scrollable side panels behave the same way).

• Nested scrolling
  Where nested scroll areas are necessary, ensure that each scrollable region has a clear visual boundary so users can understand which area will scroll.

Content & usage guidance

• Make scrollable regions obvious
  The scrollbar provides an important visual cue that more content exists beyond the current view.

• Avoid essential content being only off-screen
  Do not rely solely on users discovering scrollbars to access critical actions or information. Make key content visible without scrolling where possible.

• Support both scanning and precision
  Users should be able to quickly skim using scroll input devices and then use the thumb for precise positioning when reviewing details.

Accessibility

The scrollbar must support accessible navigation and communicate scroll state to assistive technologies.

Screen readers & semantics

• Expose scrollable regions so that assistive technologies can identify areas where additional content is available.

• Ensure that focusable content inside the scrollable region remains reachable via keyboard navigation.

Keyboard interaction

• Users must be able to move through the scrollable region using standard keyboard scrolling patterns provided by the platform or container.

• Scrolling should not trap keyboard focus or skip focusable elements within the region.

Visual considerations

• The thumb and track should remain visually distinguishable from each other and from the surrounding layout.

• Changes in thumb position should be visually clear so users can understand where they are in the content.

States

The following high-level states are relevant to the scrollbar component:

• Default – The scrollbar is present, indicating that additional content is available beyond the current view.

• Active (dragging) – The user is actively dragging the thumb along the track.

Implementation notes

This component is meant to be used as the standard scroll affordance wherever content overflows.

• Consistency
  Apply the same scrollbar behaviour across tables, panels, and any other scrollable regions so users do not need to relearn interactions.

• Responsiveness
  The scrollbar should continue to reflect content length and position as layouts change (for example, when resizing panels or changing viewport size).

• Performance
  Scrolling should remain smooth and responsive, even with large data sets, to keep the scrollbar position in sync with content movement.