Newskit Logo

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

verticalboolean = false
If provided, changes the flow direction of the Scroll contents to vertical.
scrollBarboolean = false
By default the scrollBar is hidden. Enabling this prop will set the scrollbars to behave as overflow:auto. Note: the user agent will determine how this behaves, with scrollbars generally being displayed on desktop devices.
controls'hover' | 'static' = undefined
This prop is optional. If provided, will display scroll controls ( arrow buttons ). Ifhover 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.
stepDistancenumber = 160
If scroll controls ( arrow buttons ) are enabled, this prop is used to set the scroll step representing the number of pixels that an element's content is scrolled in either direction.
snapAlign'start' | 'center' | 'end'
Enables a scroll snap behaviour and specifies which part of the element is supposed to snap to the scroll container. In order for the scroll snap to work correcly each scroll item should be wrapped within <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.
overridesobject
If provided, overrides the respective presets for the component and provided elements.
controlsobject
buttonButtonOverrides
Overrides for the buttons, check Button component for detailed information.
offsetMQ<string>
Space between the controls buttons and edge of scroll container
overlaysobject
stylePresetMQ<string>
If provided, this overrides the style preset applied to the scroll overlays
sizeMQ<string>
Size of overlays depending on orientation ( width for horizontal, and height for vertical)
Refer to the defaults below for the object structure:
1{
2  horizontal: {
3    controls: {
4      button: {
5        stylePreset: "iconButtonSolidPrimary",
6        spaceInset: "spaceInset000"
7      },
8      offset: "space040"
9    },
10    overlays: {
11      stylePreset: "scrollOverlaysHorizontal",
12      size: "sizing090"
13    }
14  },
15  vertical: {
16    controls: {
17      button: {
18        stylePreset: "iconButtonSolidPrimary",
19        spaceInset: "spaceInset000"
20      },
21      offset: "space040"
22    },
23    overlays: {
24      stylePreset: "scrollOverlaysVertical",
25      size: "sizing090"
26    }
27  }
28}
For more information about how to apply overrides to a component please refer to the Override default preset page.

Playground

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Vertical
ScrollBar
Scroll With Controls
Scroll Step
Scroll Snap
1import React from 'react';
2import { Scroll } from 'newskit';
3
4export default () => <Scroll />;
5

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:

snapAlign'start' | 'center' | 'end'
Sets the 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

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
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.