EdgeFadeMask
Add edge fade with `mask-image` to avoid hard clipping in scroll containers.
EdgeFadeMask
Add edge fade with mask-image to avoid hard clipping in scroll containers.
Basic Usage (Vertical)
Vertical fade
Demo loads on client.
Horizontal Scrolling
Horizontal fade
Demo loads on client.
API
Props
| Prop | Type | Default | Description |
|---|---|---|---|
as | string | 'div' | Root tag |
axis | 'vertical' | 'horizontal' | 'vertical' | Fade direction |
size | string | number | 24 | One-side fade distance |
threshold | number | 1 | Scroll-edge threshold in px |
disabled | boolean | false | Disable fade effect |
observeResize | boolean | true | Recompute when container size changes |
Tips
- Keep border/radius styles on the wrapper;
TxEdgeFadeMaskhandles scroll and mask. - For horizontal mode, prefer inner content with
display: flexandwidth: max-content.
Was this helpful?