Scroll Shadow
Applies top and bottom shadows when content overflows on scroll.
Installation
The above command is for individual installation only. You may skip this step if @nextui-org/react
is already installed globally.
Import
Usage
Hide Scrollbar
You can use the hideScrollBar
property to hide vertical and horizontal scrollbars.
Custom Shadow Size
By default, the shadow size is 40
in pixels, but you can change it using the size
property.
Horizontal Orientation
In case you need to apply the shadow on the horizontal scroll, you can set the orientation
property to horizontal
.
Shadow Offset
By default the shadow offset is 0
in pixels, but you can change it using the offset
property. This allows you to apply the shadow on
a specific position.
API
ScrollShadow Props
Prop | Type | Default |
size |
| "40" |
offset |
| "0" |
hideScrollBar |
| false |
orientation |
| "vertical" |
isEnabled |
| true |
visibility |
| "auto" |
ScrollShadow Events
Prop | Type | Default |
onVisibilityChange |
|