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.
hoveris passed as a value, the scroll buttons will be visible only on hover. If
staticis provided, the buttons will persist on the screen.
<ScrollSnapAlignment/>component. Currently the
scroll-snap-typesupports only the
mandatoryvalue 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.
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.
The ScrollSnapAlignment props are detailed below:
scroll-snap-alignCSS property. snapAlign gets its value from a property with the same name passed to the
Scrollcomponent 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.
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.
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
- Scroll controls are excluded from focus order.