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
<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
<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>