BalanceReckon Design System
Feedback & indicators

Scroll Mask

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

import { ScrollMask } from '@balance-web/scroll-mask';
Loading demo…

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.

Loading demo…

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.

You may optionally hide the scroll indicator where appropriate.

Loading demo…

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.

Loading demo…

On this page