Scroll Shadow

Applies top and bottom shadows when content overflows on scroll, providing visual feedback about scrollable content.

Import

Usage

Long Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Examples

Hide Scrollbar

Hide the scrollbar while maintaining scroll functionality and shadow indicators.

Hidden Scrollbar

The scrollbar is hidden but the scroll shadows still appear, providing a cleaner look while maintaining usability.

The scrollbar is hidden but the scroll shadows still appear, providing a cleaner look while maintaining usability.

The scrollbar is hidden but the scroll shadows still appear, providing a cleaner look while maintaining usability.

The scrollbar is hidden but the scroll shadows still appear, providing a cleaner look while maintaining usability.

The scrollbar is hidden but the scroll shadows still appear, providing a cleaner look while maintaining usability.

The scrollbar is hidden but the scroll shadows still appear, providing a cleaner look while maintaining usability.

The scrollbar is hidden but the scroll shadows still appear, providing a cleaner look while maintaining usability.

The scrollbar is hidden but the scroll shadows still appear, providing a cleaner look while maintaining usability.

The scrollbar is hidden but the scroll shadows still appear, providing a cleaner look while maintaining usability.

The scrollbar is hidden but the scroll shadows still appear, providing a cleaner look while maintaining usability.

The scrollbar is hidden but the scroll shadows still appear, providing a cleaner look while maintaining usability.

The scrollbar is hidden but the scroll shadows still appear, providing a cleaner look while maintaining usability.

The scrollbar is hidden but the scroll shadows still appear, providing a cleaner look while maintaining usability.

The scrollbar is hidden but the scroll shadows still appear, providing a cleaner look while maintaining usability.

The scrollbar is hidden but the scroll shadows still appear, providing a cleaner look while maintaining usability.

Horizontal Scroll

Use horizontal orientation for side-to-side scrolling content.

Card 1

Card 2

Card 3

Card 4

Card 5

Card 6

Card 7

Card 8

Card 9

Card 10

Card 11

Card 12

Card 13

Card 14

Card 15

Card 16

Card 17

Card 18

Card 19

Card 20

Custom Shadow Size

Adjust the shadow dimension beyond the default 40px.

Larger Shadow

This scroll shadow has a larger size of 80px, making the gradient effect more prominent and visible.

This scroll shadow has a larger size of 80px, making the gradient effect more prominent and visible.

This scroll shadow has a larger size of 80px, making the gradient effect more prominent and visible.

This scroll shadow has a larger size of 80px, making the gradient effect more prominent and visible.

This scroll shadow has a larger size of 80px, making the gradient effect more prominent and visible.

This scroll shadow has a larger size of 80px, making the gradient effect more prominent and visible.

This scroll shadow has a larger size of 80px, making the gradient effect more prominent and visible.

This scroll shadow has a larger size of 80px, making the gradient effect more prominent and visible.

This scroll shadow has a larger size of 80px, making the gradient effect more prominent and visible.

This scroll shadow has a larger size of 80px, making the gradient effect more prominent and visible.

This scroll shadow has a larger size of 80px, making the gradient effect more prominent and visible.

This scroll shadow has a larger size of 80px, making the gradient effect more prominent and visible.

This scroll shadow has a larger size of 80px, making the gradient effect more prominent and visible.

This scroll shadow has a larger size of 80px, making the gradient effect more prominent and visible.

This scroll shadow has a larger size of 80px, making the gradient effect more prominent and visible.

With Offset

Set a scroll position threshold before shadows appear.

Shadow with Offset

Scroll down at least 20px before the shadows appear.

The shadows will only appear after scrolling past the 20px offset threshold.

The shadows will only appear after scrolling past the 20px offset threshold.

The shadows will only appear after scrolling past the 20px offset threshold.

The shadows will only appear after scrolling past the 20px offset threshold.

The shadows will only appear after scrolling past the 20px offset threshold.

The shadows will only appear after scrolling past the 20px offset threshold.

The shadows will only appear after scrolling past the 20px offset threshold.

The shadows will only appear after scrolling past the 20px offset threshold.

The shadows will only appear after scrolling past the 20px offset threshold.

The shadows will only appear after scrolling past the 20px offset threshold.

The shadows will only appear after scrolling past the 20px offset threshold.

The shadows will only appear after scrolling past the 20px offset threshold.

The shadows will only appear after scrolling past the 20px offset threshold.

The shadows will only appear after scrolling past the 20px offset threshold.

The shadows will only appear after scrolling past the 20px offset threshold.

Visibility Change Callback

React to shadow visibility changes with a callback function.

Visibility Tracking

Check the console to see visibility changes as you scroll.

Scroll to see the visibility state change in the console.

Scroll to see the visibility state change in the console.

Scroll to see the visibility state change in the console.

Scroll to see the visibility state change in the console.

Scroll to see the visibility state change in the console.

Scroll to see the visibility state change in the console.

Scroll to see the visibility state change in the console.

Scroll to see the visibility state change in the console.

Scroll to see the visibility state change in the console.

Scroll to see the visibility state change in the console.

Scroll to see the visibility state change in the console.

Scroll to see the visibility state change in the console.

Scroll to see the visibility state change in the console.

Scroll to see the visibility state change in the console.

Scroll to see the visibility state change in the console.

ScrollShadow Props

Attribute	Type	Default	Description
size	number	40	Shadow dimension in pixels
offset	number	0	Scroll position threshold before shadow appears
hideScrollBar	boolean	false	Conceals scrollbar visibility
orientation	'horizontal' \| 'vertical'	'vertical'	Scroll direction
isEnabled	boolean	true	Activates shadow functionality
visibility	ScrollShadowVisibility	'auto'	Controls shadow display state: 'auto' \| 'top' \| 'bottom' \| 'left' \| 'right' \| 'both' \| 'none'
onVisibilityChange	(visibility: ScrollShadowVisibility) => void	-	Callback function triggered when shadow visibility changes
className	string	-	Additional CSS classes for styling
children	React.ReactNode	-	The content to be displayed with scroll shadows