Intro

The scroll container is an empty area that can be filled with content, such as other UI elements. The user can scroll through the content.

When to Use

Use a scroll container if:

  • You want to provide a content area that would otherwise be partly or completely covered or hidden.

Do not use a scroll container if:

  • A page uses a full screen element that can handle vertical scrolling.
  • You are using other controls that come with their own scroll container, such as a dialogtimeline, or panel.
  • You plan to nest different scroll containers that scroll in the same direction.
  • You plan to have several scroll containers with different scroll directions (horizontally and vertically) on one page. This may lead to confusion about when to use which scrolling direction and how it all fits together.

Behavior and Interaction

The scroll container displays a scrollbar on the side for vertical scrolling and on the bottom for horizontal scrolling.

In addition, the scroll container is also focusable.

Vertical scrolling in a list
Vertical scrolling in a list

Responsiveness

The scroll container is responsive and adapts to the screen size. By default, the width consumes the complete available width and the height reflects the height of the content. You can also set a fixed width or height. Always use responsive controls for the content, so that they also adapt to the available width and height.

Guidelines
If you are only using horizontal scrolling, do not set the height, or ensure that the height of the container always exceeds the height of the content.

Related Links

Elements and Controls

Implementation