Skip to main content


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


Type Example Height

Button Scrolling


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.


  • 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


Users may scroll by

  • Clicking in the trough,
  • Clicking on the arrows,
  • Dragging the slider