Skip to main content

Scrollbars

Scrollbars indicates a user's location in a document that is larger than the viewing space.

Specifications

Type Example Height
Default

16dp
Button Scrolling

48dp

Note: In-cab sizes only. See mobile patterns for smaller options for in-field.

Anatomy of a Scrollbar

  • Always offer a visible scrollbar if an area has scrolling content. Do not rely on auto-scrolling or on dragging. The user might not realize there is more content to scroll through.
  • Hide scrollbards if all content is visible. If users see a scrollbar, they assume there’s additional content and will be frustrated if they can’t scroll.
  • Avoid horizontal scrolling.
  • Scrollbars with arrows offer the best usability.

Types

  • Minimal: Minimal scrollbars are best, when you need to eliminate all possible distractions. They are visually unobtrusive but may create usability problems, especially for users with disabilities.
  • Default: Recommended option for mobile interfaces.
  • With Buttons: These scrollbars are larger and easier to use especially in the field. They offer the best usability.

Example of scrollbar in Lists

Behavior

Users may scroll by

  • Clicking in the trough,
  • Clicking on the arrows,
  • Dragging the slider
Last updated November 14, 2023.