Scroll Shadow
Applies top and bottom shadows when content overflows on scroll.
Storybook@nextui-org/scroll-shadowSourceStyles source
We're live on Product Hunt! Join the conversation and help us get to #1 Product of the day 🚀
Installation
npx nextui-cli@latest add scroll-shadow
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
ShadowScroll Props
| Attribute | Type | Description | Default |
|---|---|---|---|
| size | number | The shadow size in pixels. | 40 |
| offset | number | The scroll offset to show the shadow in pixels. | 0 |
| hideScrollBar | boolean | Whether to hide the scrollbar or not. | false |
| orientation | horizontal | vertical | The scroll orientation. | vertical |
| isEnabled | boolean | Whether the shadow is enabled or not. | true |
| visibility | ScrollShadowVisibility | The shadow visibility. (controlled) | auto |
ShadowScroll Events
| Attribute | Type | Description |
|---|---|---|
| onVisibilityChange | (visibility: ScrollShadowVisibility) => void | Callback invoked when the shadow visibility changes. |
Types
Scroll Shadow Visibility
type ScrollShadowVisibility = "auto" | "top" | "bottom" | "left" | "right" | "both" | "none";
