Skip to main content

Scrollbars

Scrollbars allow user to scroll content within a window.

Specifications

Anatomy of a Scrollbar

Scrollbar Anatomy

  • Always offer a 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. It has become a convention for mobile UIs that a scrollbar remains invisible until the user starts scrolling, but use it with caution (see Minimal Scrollbar below).
  • 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.

Behavior

Users may scroll by

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

Minimal Scrollbars

Scrollbar Minimal No Interaction

Default Scrollbars

Scrollbar Minimal Not Scrolling

Button Scrolling

Button Scrolling

Last updated March 1, 2023.