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

import React from 'react';
import { Scroll } from 'newskit';

export default () => <Scroll />;