Scroll
Overview
By adding a scroll component to a block, you can enable the content within the block to automatically become scrollable. The scroll direction is horizontal by default.
Props
hover
is passed as a value, the scroll buttons will be visible only on hover. If static
is provided, the buttons will persist on the screen.<ScrollSnapAlignment/>
component. Currently the scroll-snap-type
supports only the mandatory
value which means the browser has to snap to a snap point whenever the user stops scrolling.An error occurred loading this code example.
For more information about how to apply overrides to a component please refer to the Override default preset page.Playground
ScrollSnapAlignment Overview
The ScrollSnapAlignment component should wrap each scrollable item inside the scroll container. It is used to set the scroll-snap-align
CSS property for each item.
ScrollSnapAlignment Props
The ScrollSnapAlignment props are detailed below:
scroll-snap-align
CSS property. snapAlign gets its value from a property with the same name passed to the Scroll
component through a React context. This makes it easier to use these two components together and keeps them in sync. In case you want a specific scrollable item to have different snap position you can pass one of the three supported values to the ScrollSnapAlignment itself. Be aware that such change might cause unexpected scroll behaviour.
Usage
1<Scroll controls="static" snapAlign="start">
2 <Stack flow="horizontal-top">
3 <ScrollSnapAlignment>
4 <Block>Item 1</Block>
5 </ScrollSnapAlignment>
6 <ScrollSnapAlignment>
7 <Block>Item 2</Block>
8 </ScrollSnapAlignment>
9 <ScrollSnapAlignment snapAlign="end">
10 <Block>Item 3</Block>
11 </ScrollSnapAlignment>
12 <ScrollSnapAlignment>
13 <Block>Item 3</Block>
14 </ScrollSnapAlignment>
15 </Stack>
16 </Scroll>
NOTE: By default the Scroll component has a scroll step of 160px. Combining scroll buttons with scroll snap works best when all scrollable items have a similar width.
Also the stepDistance
value should be:
Greater than - the half width (or height if orientation is vertical) of the smallest item inside. Otherwise it might prevent the container from scrolling when using the control buttons
Smaller than - the width (or height if orientation is vertical) of the scroll area. Otherwise you might experience skipping mutiple scroll items at once
Accessibility
- Scroll controls are excluded from focus order.