components / Structure

Scroll

Scroll Indicator

Scroll indicator, the shadow, provides an extra visual cue that content exists below or above the fold.

Size

Maximum width and height may be set explicitly via props, as in example above. Size also may be controlled by external container.

Horizontal

If content goes further rigth side of the Scroll, it may reflect such behavior.

Hidden Scrollbar

User is capable to scroll content even without visible scrollbar.

Use Cases

Scroll component intended to be used in:

  • overlay components, like Modal, Drawer, Popover, Toast, Takeover, ActionMenu, etc., where scrollable behavior might be unexpected
  • fixed-size components, like Card, Tab, Sidebar, where extra visual hint come in handy
  • Select component in case of too long list of options, which makes scrollbar unusable

Examples