IScrollFade ​

A scroll container that fades the edges it can still scroll past, so a cropped list shows there is more without waiting for a scrollbar.

<IScrollFade class="h-56">
  <ul>
    <li v-for="invoice in invoices" :key="invoice.id">{{ invoice.id }}</li>
  </ul>
</IScrollFade>

Scroll it: the top edge stays sharp until something has moved past it, and the bottom fade disappears at the end of the list.

Horizontal ​

<IScrollFade orientation="horizontal">
  <div class="flex w-max gap-2">
    <IBadge v-for="tag in tags" :key="tag">{{ tag }}</IBadge>
  </div>
</IScrollFade>

A horizontal strip is where this earns its keep — on a trackpad the scrollbar never appears at all.

The fade is a mask ​

The edges are masked rather than covered by a gradient, so the component needs no background colour of its own and works on a card, a coloured panel or an image.

The mask applies to everything the element paints: a border on the component fades at the corners, the scrollbar fades with it, and anything position: sticky inside fades too. Put the frame — and any sticky header — on a wrapper instead.

<!-- No background colour is passed, and none is needed -->
<div class="rounded-xl bg-primary/10 p-4">
  <IScrollFade class="h-40">…</IScrollFade>
</div>

Fade length, and fading one edge only ​

size takes any CSS length. fadeStart and fadeEnd switch an edge off entirely, for when something else already covers it.

<IScrollFade size="4rem" :fade-start="false" class="h-40">…</IScrollFade>

Reacting to the edges ​

data-at-start, data-at-end and data-overflowing land on the root, so a "scroll for more" hint outside the container needs no script at all. Scroll the list to watch the line under it change.

<div class="edge-demo">
  <IScrollFade class="h-40">
    <ul>…</ul>
  </IScrollFade>
  <p class="edge-hint" />
</div>

<style>
/* Each rule is more specific than the last, so the right one wins. */
.edge-hint::before { content: 'Everything fits'; }
.edge-demo [data-overflowing] + .edge-hint::before { content: 'More below'; }
.edge-demo [data-overflowing][data-at-end] + .edge-hint::before { content: 'You have reached the end'; }
</style>

The default slot receives the same three as props, for content that has to react in script rather than in CSS:

<IScrollFade v-slot="{ atEnd, overflowing }">
  <ul>…</ul>
  <button v-if="overflowing && !atEnd" @click="loadMore()">Load more</button>
</IScrollFade>

Props ​

How the edges are measured ​

The edges are re-measured on scroll, when the container or its content resizes, and when rows are added or removed — so the fades stay correct through a reflow or a filtered list, with no work on your side.