Logo

svelte-overflow-fade

GitHub

@attach overflowFade (Attachment)

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
Item 13
Item 14
Item 15
Item 16
Item 17
Item 18
Item 19
Item 20
Item 21
Item 22
Item 23
Item 24
Item 25
Item 26
Item 27
Item 28
Item 29
Item 30
Item 31
Item 32
Item 33
Item 34
Item 35
Item 36
Item 37
Item 38
Item 39
Item 40
Item 41
Item 42
Item 43
Item 44
Item 45
Item 46
Item 47
Item 48
Item 49
Item 50

isOverflowing (Overflow Detection Only)

Use this to detect container overflow and show/hide scroll controls. Note: The overflowFade action also emits these same events while adding visual fades.

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
Item 13
Item 14
Item 15
Item 16
Item 17
Item 18
Item 19
Item 20

Example Code

<script>
  import { isOverflowingAction } from 'svelte-overflow-fade';
  
  let showLeftBtn = $state(false);
  let showRightBtn = $state(false);
</script>

<div 
  class="relative"
>
  <div
    class="overflow-auto"
    use:isOverflowingAction={{ 
      axis: 'x' 
    }}
    onoverflow={({ detail }) => {
      showLeftBtn = detail.overflowLeft;
      showRightBtn = detail.overflowRight;
    }}
  >
    <!-- Scrollable content -->
  </div>
  
  {#if showLeftBtn}
    <button class="absolute left-4">←</button>
  {/if}
  
  {#if showRightBtn}
    <button class="absolute right-4">→</button>
  {/if}
</div>

Installation & Usage

Install

npm install svelte-overflow-fade
pnpm add svelte-overflow-fade
yarn add svelte-overflow-fade

Action API

Compatible with all Svelte versions

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

<div 
  class="overflow-auto max-h-64"
  use:overflowFadeAction={{
    axis: 'y',
    fade: { 
      type: 'mask', 
      fadePercent: 10 
    }
  }}
  onoverflow={({ detail }) => {
    // Also emits overflow events!
    console.log(detail.overflowTop, detail.overflowBottom);
  }}
>
  <!-- Scrollable content -->
</div>

Attachment API

Svelte 5.29+ with enhanced reactivity

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

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

Configuration Options

axis: 'x' | 'y' - Scroll direction
fade.type: 'mask' | 'element' - Fade implementation
fade.fadePercent: number - Fade size (mask mode)
fade.size: string - Fade size (element mode)
fade.backgroundColor: string - Fade color (element mode)

TypeScript: Custom Event Types

To avoid TypeScript errors with the onoverflow event, add this to your app.d.ts or a separate .d.ts file:

/// <reference types="svelte" />
import type { OverflowState } from 'svelte-overflow-fade';

declare global {
  namespace svelteHTML {
    interface HTMLAttributes<T> {
      // Svelte 5 syntax
      'onoverflow'?: (e: CustomEvent<OverflowState>) => void;
      // Svelte 4 syntax (if needed)
      'on:overflow'?: (e: CustomEvent<OverflowState>) => void;
    }
  }
}

export {};

Note: The declare global wrapper is essential for the types to work correctly.