Navigation
Scroll
The scroll component adds scroll behaviour to overflowed content.
Anatomy
The scroll component contains one required element and two optional elements.
| Item | Name | Description | Component | Optional |
|---|
Options
The scroll component has options that can be used to provide an appropriate experience for different use cases.
Orientation
The scroll component can be displayed horizontally or vertically, depending on the desired scroll direction.
Control visibility
Controls (icon buttons) can be enabled on the scroll. If enabled, they can be set to appear persistently or on hover.
Scroll bar visibility
A scroll bar can be displayed in the scroll component to provide users with extra context of the horizontal or vertical position of the content being scrolled.
Scroll step distance
Scroll step distance can be adjusted to increase or decrease the distance scrolled when the controls are clicked.
Scroll snap alignment
startaligns the scroll item snapping position to the left.centercenters the scroll item snapping position.endaligns the scroll item snapping position to the right.
`ScrollSnapAlignment` can be used inside to a scroll component to individually set where the component should align.
Orientation
The scroll component can be displayed horizontally or vertically, depending on the desired scroll direction.
Control visibility
Controls (icon buttons) can be enabled on the scroll. If enabled, they can be set to appear persistently or on hover.
Scroll bar visibility
A scroll bar can be displayed in the scroll component to provide users with extra context of the horizontal or vertical position of the content being scrolled.
Scroll step distance
Scroll step distance can be adjusted to increase or decrease the distance scrolled when the controls are clicked.
Scroll snap alignment
startaligns the scroll item snapping position to the left.centercenters the scroll item snapping position.endaligns the scroll item snapping position to the right.
`ScrollSnapAlignment` can be used inside to a scroll component to individually set where the component should align.
Behaviours
The following guidance describes how the scroll component behaves.
Overlays
Overlays are displayed when content is overflowing at either the start, the end, or both.
You can change the style or visually hide the overlays by overriding the style preset.
Overlays
Overlays are displayed when content is overflowing at either the start, the end, or both.
You can change the style or visually hide the overlays by overriding the style preset.
Usage
Here’s how and when to use scroll:
Do hide scroll controls for mobile
Hide controls on mobile breakpoints to encourage a user to swipe, as this is common mobile device behaviour.
Do use an appropriate step distance
When using controls, use an appropriate step distance if all scrollable items have similar widths.
Accessibility considerations
The scroll component has the following accessibility considerations:
Scroll controls are not focussable. When the scroll element is in focus, users are able to scroll the element natively e.g. keyboard, mouse scroll wheel.
| Command | Description |
|---|
| Element | Attribute | Value | Description | User supplied |
|---|
API
The scroll component has a range of props that can be used to define an appropriate experience for different use cases.
| Name | Type | Default | Description | Required |
|---|
ScrollSnapAlignment has a range of props that can be used to define an appropriate experience for different use cases. It can be used inside to a scroll component to individually set where the component should align.
| Name | Type | Default | Description | Required |
|---|