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 flow is set to “horizontal” by default.

Props

verticalboolean = false
If provided, changes the flow direction of the Scroll contents to vertical.
arrows'hover' | 'static' = undefined
This prop is optional. If provided, will display scroll arrow buttons. If '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.
stepDistancenumber = 160
If scroll 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.
overridesobject
If provided, overrides the respective presets for the component and provided elements.
arrowsobject
stylePresetMQ<string>
If provided, this overrides the stylePreset preset applied to the scroll arrow buttons.
spaceInsetMQ<string>
If provided, this overrides the padding space applied to scroll icon buttons.
Refer to the defaults below for the object structure:
{
  arrows: {
    stylePreset: "iconButtonMinimalPrimary",
    spaceInset: "space000"
  }
}
For more information about how to apply overrides to a component please refer to the Override default preset page.

Playground

Example Image
Vertical
Scroll With Arrows
Scroll Step
import React from 'react';
import { Scroll } from 'newskit';

export default () => <Scroll />;