Newskit Logo

Getting started

Design overview

Popular searches

View GitHub

Navigation

Scroll

The scroll component adds scroll behaviour to overflowed content.

Status

Supported

Introduced

v0.8.0

View codeView StorybookView Design

Interactive demo

This demo allows you to preview the scroll component, its variations, and configuration options.

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

Anatomy

The scroll component contains one required element and two optional elements.

ItemNameDescriptionComponentOptional

Options

The scroll component has options that can be used to provide an appropriate experience for different use cases.

Orientation

The scroll component can be displayed horizontally or vertically, depending on the desired scroll direction.

Control visibility

Controls (icon buttons) can be enabled on the scroll. If enabled, they can be set to appear persistently or on hover.

Scroll bar visibility

A scroll bar can be displayed in the scroll component to provide users with extra context of the horizontal or vertical position of the content being scrolled.

Scroll step distance

Scroll step distance can be adjusted to increase or decrease the distance scrolled when the controls are clicked.

Scroll snap alignment

  • start aligns the scroll item snapping position to the left.

  • center centers the scroll item snapping position.

  • end aligns the scroll item snapping position to the right.

`ScrollSnapAlignment` can be used inside to a scroll component to individually set where the component should align.

Orientation

The scroll component can be displayed horizontally or vertically, depending on the desired scroll direction.

Control visibility

Controls (icon buttons) can be enabled on the scroll. If enabled, they can be set to appear persistently or on hover.

Scroll bar visibility

A scroll bar can be displayed in the scroll component to provide users with extra context of the horizontal or vertical position of the content being scrolled.

Scroll step distance

Scroll step distance can be adjusted to increase or decrease the distance scrolled when the controls are clicked.

Scroll snap alignment

  • start aligns the scroll item snapping position to the left.

  • center centers the scroll item snapping position.

  • end aligns the scroll item snapping position to the right.

`ScrollSnapAlignment` can be used inside to a scroll component to individually set where the component should align.

Behaviours

The following guidance describes how the scroll component behaves.

Overlays

Overlays are displayed when content is overflowing at either the start, the end, or both.

You can change the style or visually hide the overlays by overriding the style preset.

Overlays

Overlays are displayed when content is overflowing at either the start, the end, or both.

You can change the style or visually hide the overlays by overriding the style preset.

Usage

Here’s how and when to use scroll:

Do hide scroll controls for mobile

Hide controls on mobile breakpoints to encourage a user to swipe, as this is common mobile device behaviour.

Do use an appropriate step distance

When using controls, use an appropriate step distance if all scrollable items have similar widths.

Accessibility considerations

The scroll component has the following accessibility considerations:

Focus order

Scroll controls are not focussable. When the scroll element is in focus, users are able to scroll the element natively e.g. keyboard, mouse scroll wheel.

Keyboard Interactions
CommandDescription
WAI-ARIA
ElementAttributeValueDescriptionUser supplied

API

Scroll

The scroll component has a range of props that can be used to define an appropriate experience for different use cases.

NameTypeDefaultDescriptionRequired
ScrollSnapAlignment

ScrollSnapAlignment has a range of props that can be used to define an appropriate experience for different use cases. It can be used inside to a scroll component to individually set where the component should align.

NameTypeDefaultDescriptionRequired

Need Help?

Cant find what you are looking for?

Get In Touch

Need Help?

Cant find what you are looking for?