Scrollable

Scrollable area adorned with top and bottom drop shadows on scroll detection

Shadow is shown on top if you scroll upwards Shadow is shown on bottom if you scroll downwards

If you don't specify height you will get a default height per the Scrollable component (subject to change)

Basic usage of scrollable with provided height

Show editable code example

Any Paragon component or export may be added to the code example.

<Scrollable id="test" style={{'height': '40vh'}}>
  <p>Do not use overflow in wrapped component, Scrollable provides overflow:auto around wrapped element</p>
  <p>A very long scrollable Content.</p>
  <p>A very long scrollable Content.</p>
  <p>A very long scrollable Content.</p>
  <p>A very long scrollable Content.</p>
  <p>A very long scrollable Content.</p>
  <p>A very long scrollable Content.</p>
  <p>A very long scrollable Content.</p>
  <p>A very long scrollable Content.</p>
  <p>A very long scrollable Content.</p>
  <p>A very long scrollable Content.</p>
  <p>A very long scrollable Content.</p>
  <p>A very long scrollable Content.</p>
  <p>A very long scrollable Content.</p>
  <p>A very long scrollable Content.</p>
  <p>A very long scrollable Content.</p>
  <p>A very long scrollable Content.</p>
  <p>A very long scrollable Content.</p>
  <p>A very long scrollable Content.</p>
  <p>A very long scrollable Content.</p>
  <p>A very long scrollable Content.</p>
  <p>A very long scrollable Content.</p>
  <p>A very long scrollable Content.</p>
  <p>A very long scrollable Content.</p>
  <p>A very long scrollable Content.</p>
  <p>A very long scrollable Content.</p>
  <p>A very long scrollable Content.</p>
  <p>A very long scrollable Content.</p>
  <p>A very long scrollable Content.</p>
  <p>A very long scrollable Content.</p>
  <p>A very long scrollable Content.</p>
  <p>A very long scrollable Content.</p>
  <p>A very long scrollable Content.</p>
  <p>A very long scrollable Content.</p>
  <p>A very long scrollable Content.</p>
  <p>A very long scrollable Content.</p>
  <p>A very long scrollable Content.</p>
</Scrollable>

<Scrollable id="test" style={{'height': '40vh'}}>
  <p>Do not use overflow in wrapped component, Scrollable provides overflow:auto around wrapped element</p>
  <p>A very long scrollable Content.</p>
  <p>A very long scrollable Content.</p>
  <p>A very long scrollable Content.</p>
  <p>A very long scrollable Content.</p>
  <p>A very long scrollable Content.</p>
  <p>A very long scrollable Content.</p>
  <p>A very long scrollable Content.</p>
  <p>A very long scrollable Content.</p>
  <p>A very long scrollable Content.</p>
  <p>A very long scrollable Content.</p>
  <p>A very long scrollable Content.</p>
  <p>A very long scrollable Content.</p>
  <p>A very long scrollable Content.</p>
  <p>A very long scrollable Content.</p>
  <p>A very long scrollable Content.</p>
  <p>A very long scrollable Content.</p>
  <p>A very long scrollable Content.</p>
  <p>A very long scrollable Content.</p>
  <p>A very long scrollable Content.</p>
  <p>A very long scrollable Content.</p>
  <p>A very long scrollable Content.</p>
  <p>A very long scrollable Content.</p>
  <p>A very long scrollable Content.</p>
  <p>A very long scrollable Content.</p>
  <p>A very long scrollable Content.</p>
  <p>A very long scrollable Content.</p>
  <p>A very long scrollable Content.</p>
  <p>A very long scrollable Content.</p>
  <p>A very long scrollable Content.</p>
  <p>A very long scrollable Content.</p>
  <p>A very long scrollable Content.</p>
  <p>A very long scrollable Content.</p>
  <p>A very long scrollable Content.</p>
  <p>A very long scrollable Content.</p>
  <p>A very long scrollable Content.</p>
  <p>A very long scrollable Content.</p>
</Scrollable>

With padding used by consumer

Show editable code example

Any Paragon component or export may be added to the code example.

<Scrollable style={{'height': '40vh'}}>
  <div className="p-4">
    <p>Do not use overflow in wrapped component, Scrollable provides overflow:auto around wrapped element</p>
    <p>A very long scrollable Content.</p>
    <p>A very long scrollable Content.</p>
    <p>A very long scrollable Content.</p>
    <p>A very long scrollable Content.</p>
    <p>A very long scrollable Content.</p>
    <p>A very long scrollable Content.</p>
    <p>A very long scrollable Content.</p>
    <p>A very long scrollable Content.</p>
    <p>A very long scrollable Content.</p>
    <p>A very long scrollable Content.</p>
    <p>A very long scrollable Content.</p>
    <p>A very long scrollable Content.</p>
    <p>A very long scrollable Content.</p>
    <p>A very long scrollable Content.</p>
    <p>A very long scrollable Content.</p>
    <p>A very long scrollable Content.</p>
    <p>A very long scrollable Content.</p>
    <p>A very long scrollable Content.</p>
    <p>A very long scrollable Content.</p>
    <p>A very long scrollable Content.</p>
    <p>A very long scrollable Content.</p>
    <p>A very long scrollable Content.</p>
    <p>A very long scrollable Content.</p>
    <p>A very long scrollable Content.</p>
    <p>A very long scrollable Content.</p>
    <p>A very long scrollable Content.</p>
    <p>A very long scrollable Content.</p>
    <p>A very long scrollable Content.</p>
    <p>A very long scrollable Content.</p>
    <p>A very long scrollable Content.</p>
    <p>A very long scrollable Content.</p>
    <p>A very long scrollable Content.</p>
    <p>A very long scrollable Content.</p>
    <p>A very long scrollable Content.</p>
    <p>A very long scrollable Content.</p>
    <p>A very long scrollable Content.</p>
  </div>
</Scrollable>

<Scrollable style={{'height': '40vh'}}>
  <div className="p-4">
    <p>Do not use overflow in wrapped component, Scrollable provides overflow:auto around wrapped element</p>
    <p>A very long scrollable Content.</p>
    <p>A very long scrollable Content.</p>
    <p>A very long scrollable Content.</p>
    <p>A very long scrollable Content.</p>
    <p>A very long scrollable Content.</p>
    <p>A very long scrollable Content.</p>
    <p>A very long scrollable Content.</p>
    <p>A very long scrollable Content.</p>
    <p>A very long scrollable Content.</p>
    <p>A very long scrollable Content.</p>
    <p>A very long scrollable Content.</p>
    <p>A very long scrollable Content.</p>
    <p>A very long scrollable Content.</p>
    <p>A very long scrollable Content.</p>
    <p>A very long scrollable Content.</p>
    <p>A very long scrollable Content.</p>
    <p>A very long scrollable Content.</p>
    <p>A very long scrollable Content.</p>
    <p>A very long scrollable Content.</p>
    <p>A very long scrollable Content.</p>
    <p>A very long scrollable Content.</p>
    <p>A very long scrollable Content.</p>
    <p>A very long scrollable Content.</p>
    <p>A very long scrollable Content.</p>
    <p>A very long scrollable Content.</p>
    <p>A very long scrollable Content.</p>
    <p>A very long scrollable Content.</p>
    <p>A very long scrollable Content.</p>
    <p>A very long scrollable Content.</p>
    <p>A very long scrollable Content.</p>
    <p>A very long scrollable Content.</p>
    <p>A very long scrollable Content.</p>
    <p>A very long scrollable Content.</p>
    <p>A very long scrollable Content.</p>
    <p>A very long scrollable Content.</p>
    <p>A very long scrollable Content.</p>
  </div>
</Scrollable>

Scrollable Props API

children node Required
Specifies the content of the Scrollable.
className string
Additional classnames for this component.

Paragon Design System

Theme

PlaygroundBeta

Scrollable

Scrollable area adorned with top and bottom drop shadows on scroll detection

Basic usage of scrollable with provided height

With padding used by consumer

All components (A-Z)

Theme

PlaygroundBeta

Scrollable

Scrollable area adorned with top and bottom drop shadows on scroll detection#

Basic usage of scrollable with provided height#

With padding used by consumer#

All components (A-Z)

Scrollable area adorned with top and bottom drop shadows on scroll detection

Basic usage of scrollable with provided height

With padding used by consumer