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)

paddingInlineMQ<string>

It can take one space token to specify the logical inline start and end padding of the container. This space token can also be used on breakpoints.

paddingInlineStartMQ<string>

It can take one space token to specify the logical inline start padding of the container. This space token can also be used on breakpoints.

paddingInlineEndMQ<string>

It can take one space token to specify the logical inline end padding of the container. This space token can also be used on breakpoints.

paddingBlockMQ<string>

It can take one space token to specify the logical block start and end padding of the container. This space token can also be used on breakpoints.

paddingBlockStartMQ<string>

It can take one space token to specify the logical block start padding of the container. This space token can also be used on breakpoints.

paddingBlockEndMQ<string>

It can take one space token to specify the logical block end padding of the container. This space token can also be used on breakpoints.

marginInlineMQ<string>

It can take one space token to specify the logical inline start and end margin of the container. This space token can also be used on breakpoints.

marginInlineStartMQ<string>

It can take one space token to specify the logical inline start margin of the container. This space token can also be used on breakpoints.

marginInlineEndMQ<string>

It can take one space token to specify the logical inline end margin of the container. This space token can also be used on breakpoints.

marginBlockMQ<string>

It can take one space token to specify the logical block start and end margin of the container. This space token can also be used on breakpoints.

marginBlockStartMQ<string>

It can take one space token to specify the logical block start margin of the container. This space token can also be used on breakpoints.

marginBlockEndMQ<string>

It can take one space token to specify the logical block end margin of the container. This space token can also be used on breakpoints.

Refer to the defaults below for the object structure:

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

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

Item 9

Item 10

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