svelte-overflow-fade

KO | EN

gitlite — search

#react #ai #typescript #go #rust #linux #docker #nodejs #windows #cli #vue #ios #mcp #open-source

svelte-overflow-fade

(★ 28)

Svelte attachment and action to enable overflow fade ✨

svelte-overflow-fade 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<div align="center">
  <br />
  <img src="./static/logo.png" alt="Svelte Overflow Fade" width="100" height="100" />
  <h1>svelte-overflow-fade</h1>

[![version](http://img.shields.io/npm/v/svelte-overflow-fade.svg)](https://www.npmjs.com/package/svelte-overflow-fade)
  [![downloads](http://img.shields.io/npm/dm/svelte-overflow-fade.svg)](https://www.npmjs.com/package/svelte-overflow-fade)
 
  <p>
    <strong>A Svelte action and attachment for adding beautiful fade effects to overflowing content</strong>
  </p>
</div>

<br />

## 🖼️ Demo

[Live Demo →](https://harshmandan.github.io/svelte-overflow-fade/)

## ✨ 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

### Using the Action API (All Svelte versions)

```svelte
<script>
	import { overflowFadeAction } from 'svelte-overflow-fade';
</script>

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

### Using the Attachment API (Svelte 5.29+)

```svelte
<script>
	import { overflowFade } from 'svelte-overflow-fade';
</script>

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

### Fading all four edges

Set `axis: 'both'` to fade every edge at once — useful for content that scrolls in
both directions (large tables, canvases, image grids). The two axis masks are
composited together so corners fade correctly rather than one axis overwriting the
other. `sides` still applies here: `'start'` fades top + left, `'end'` fades bottom +
right, `'both'` (default) fades all four edges.

```svelte
<div
	class="overflow-auto max-h-96"
	{@attach overflowFade({
		axis: 'both',
		fade: { type: 'mask', fadePercent: 10 }
	})}
>
	
</div>
```

## ⚙️ Configuration Options

| Option                 | Type                  | Description                                   |
| ---------------------- | --------------------- | --------------------------------------------- |
| `axis`                 | `'x' \| 'y' \| 'both'` | Direction of scroll. `'both'` fades all four edges at once  |
| `sides`                | `'both' \| 'start' \| 'end'` | Which edge to fade (default `'both'`). `'start'` = top/left, `'end'` = bottom/right, relative to `axis` (with `axis: 'both'`, `'start'` = top + left, `'end'` = bottom + right) |
| `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

### CSS Mask Mode (Recommended)

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

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

### Element Mode

- 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
<script>
	function handleOverflow(event) {
		const { overflowTop, overflowBottom, overflowLeft, overflowRight } = event.detail;
		// React to overflow changes
	}
</script>

<div use:overflowFadeAction={{ axis: 'y' }} on:overflow={handleOverflow}>
	
</div>
```

## 📄 License

svelte-overflow-fade

svelte-overflow-fade 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

svelte-overflow-fade

svelte-overflow-fade 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README