svelte-overflow-fade

A Svelte action and attachment for adding beautiful fade effects to overflowing content

🖼️ Demo

Live Demo →

✨ Features

- 🎨 Two fade modes: CSS mask-based or DOM element-based
- 🔄 Dual API support: Actions for all Svelte versions, Attachments for Svelte 5.29+
- 📏 Directional scrolling: Supports both horizontal and vertical overflow
- 🎯 Smart detection: Automatically shows/hides fades based on scroll position
- ⚡ Performant: Throttled scroll events and optimized animations
- 🌗 Dark mode ready: Works seamlessly with any color scheme
- 📦 Zero dependencies: Lightweight and self-contained

📦 Installation

``bash
npm install svelte-overflow-fade
`

`bash
pnpm add svelte-overflow-fade
`

`bash
yarn add svelte-overflow-fade
`

🚀 Quick Start

$3

`svelte


class="overflow-auto max-h-64"
use:overflowFadeAction={{
axis: 'y',
fade: { type: 'mask', fadePercent: 10 }
}}
>




`

$3

`svelte


class="overflow-auto max-h-64"
{@attach overflowFade({
axis: 'y',
fade: { type: 'mask', fadePercent: 10 }
})}
>



| Option | Type | Description |
| ---------------------- | --------------------- | --------------------------------------------- |
| axis | 'x' \| 'y' | Direction of scroll (horizontal or vertical) |
| fade.type | 'mask' \| 'element' | Fade implementation method |
| fade.fadePercent | number | Size of fade as percentage (mask mode only) |
| fade.size | string | Size of fade in CSS units (element mode only) |
| fade.backgroundColor | string | Fade color (element mode only) |
| fade.zIndex | number | Z-index for fade elements (element mode only) |

🎨 Fade Modes

$3

- Uses CSS mask-image for smooth, native fading
- Perfect for gradient backgrounds
- Better performance
- Preserves background effects

`javascript
fade: {
type: 'mask',
fadePercent: 10
}
`

$3

- Creates DOM elements with gradient backgrounds
- Compatible with older browsers
- Customizable fade color
- Good for solid backgrounds

`javascript
fade: {
type: 'element',
size: '60px',
backgroundColor: 'white',
zIndex: 10
}
`

🔄 Events

The action dispatches an overflow event with the current overflow state:

`svelte


📄 License

MIT © Harsh Mandan