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>

Theme Variables#

CSS Variable	Computed Value
‌	‌
‌	‌
‌	‌
‌	‌
‌	‌

Props API#

Scrollable Props API

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

Usage Insights#

Scrollable

	Project Name	Paragon Version	Instance Count
	frontend-app-course-authoring	22.8.1	2

Edit this page Leave feedback

Paragon Design System

Theme

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

Theme Variables#

Props API#

Usage Insights#

Scrollable

All components (A-Z)

Theme

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#

Theme Variables#

Props API#

Usage Insights#

Scrollable

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