There are instances in UI design where content is larger than the container it's placed within. In these instances, we use a CSS property overflow: scroll which indicates to the browser to display a scrollbar.
Scrollbars
Native scrollbars display horizontally or vertically when:
- It’s not possible to stack or wrap the content within the available area of the viewport (for example, Magnolia tables)
- Components' own properties require it (for example, horizontal tabs)
- It helps to constrain and fit unusual items on a page (for example, a window with a large amoutn of copy)
The browser defines scrollbar styles and we should not override them with CSS styles.
Examples of horizontal scrollbars in the page
Horizontal scroll:
- These appear at the bottom of the container
- The padding between the component and the scrollbar should follow our layout and spacing guidelines
- The padding between the scrollbar and the next section should be sufficient to indicate the grouping (larger than between the scroll bar and the component it belongs to)
Vertical scroll:
- A vertical scrollbar appears automatically along the right edge of the component
- Designs should be considerate of how scrollbars appear in different browsers (overuse can add additional noise to the screen)
- Some browser scrollbars do not display by default, so a gradient fade should be placed at the edge of where the offscreen content is located to visually indicate that content is available
Overflows
Overflows are fading gradients that indicate there's more text or content beyond the limits of the container. They're presented 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