There are instances in user interface (UI) design where content exceeds the container size. The platform displays a scrollbar to indicate additional content is off-screen.
Scrollbars
Native scrollbars display horizontally or vertically when:
- Content cannot stack or wrap the content within the available area of the viewport, e.g. tables
- The functionality of a component requires it to allow for content that will be displayed off-screen e.g, horizontal tabs
- It helps to constrain and fit unusual items on a page, e.g. a window with a large amount of copy
The browser defines scrollbar styles. Do not override them with CSS styles or third-party libraries.
Examples of horizontal scrollbars in the page
Horizontal scroll
- These appear at the bottom of the container
- Leave more padding between the scrollbar and the next section than between the scrollbar and its component
- The spacing between the scrollbar and the next section must be sufficient to indicate the grouping
Vertical scroll
- A vertical scrollbar appears automatically along the right edge of the component
- Consider how scrollbars appear in different browsers; overuse add visual clutter
- Some browser scrollbars do not display by default, and place a gradient fade at the edge of where the off-screen content is located to indicate that content is available visually
Overflows
Overflows are fading gradients that indicate there is more text or content beyond the limits of the container. Use overflows in different orientations and colours to be used in various scenarios.
Inverted Blue and Dark Overflows
In the example of the 'Tabs' component below, they display to the user that further items are off-screen.
Tabs example