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 dialog, timeline, 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
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.
Related Links
Implementation
- Scroll Container (SAPUI5 samples)
- Scroll Container (SAPUI5 API)
Visual Design
- Scrollbar (visual design specification)
Implementation
- Scroll Container (SAPUI5 samples)
- Scroll Container (SAPUI5 API)