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 downwardsIf 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>
Scrollable Props API
- children
nodeRequiredSpecifies the content of the
Scrollable. - className
stringAdditional classnames for this component.