Skip to main content

Scrollbars

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

Scrollbar

Overview

The scrollbar is for both showing a user that content in a container overflows and for the user to control the scrolling content of that container. Always offer a scrollbar if an area has scrolling content: do not rely on auto-scrolling or on dragging. Scrollbars can be both vertical and horizontal. However, avoid horizontal scrolling, if possible.

Usage

Use when

  • An area has scrolling content.
  • Allow users to easily navigate through the content without having to zoom in and out or swipe.
  • If a touchscreen does not support gestures or the bar needs to be clearly visible, use button scrolling.

Don’t use when

  • All the content is visible.
  • Horizontal scrolling can be replaced with a better option.
What's changed
Date Version Notes Contributors
05/09/2022 1.0.1 Updated full layout. M. Johns
Last updated July 3, 2023.