Balance Logo
Balance
Reckon Design System

Scroll Mask

The scroll mask helps indicate to the user that there is more content available beyond the cropping container.
Install
pnpm add @reckon-web/scroll-mask
Import usage
import {
ScrollMask
} from '@reckon-web/scroll-mask';
  • Code
  • API

The scroll mask is primarily an internal helper used in components like the DataTable, where content may horizontally overflow its container.

Usage

Pass an element or elements as children to the ScrollMask. Do not handle scroll on child element(s), that's controlled within the component.

Scroll
Open in Playroom

Scroll Indicator

The scroll indicator is displayed by default, indicating that there is more content available beyond the cropping container. The indicator is hidden once the user initially scrolls and is not shown again.

Though it's not recommended for most cases, you may optionally hide the scroll indicator where appropriate.

Scroll

Dynamic Content

Because the contents of the scroll mask might be dynamic, and/or may not overflow the container, the masks and indicator are hidden until required.

Scroll
Copyright © 2021 Reckon. Designed and developed in partnership with Thinkmill.