scroll-fade

Utility untuk memberi efek pudar di tepi area gulir.

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

Item 9

Item 10

Item 11

Item 12

<script setup lang="ts">
const items = Array.from({ length: 12 }, (_, index) => `Item ${index + 1}`)
</script>

<template>
  <div class="mx-auto w-full max-w-xs overflow-hidden rounded-2xl border">
    <div class="scroll-fade scrollbar-none h-72 overflow-y-auto">
      <div class="flex flex-col gap-1.5 p-1.5">
        <div
          v-for="item in items"
          :key="item"
          class="rounded-lg bg-muted px-3 py-2.5 text-sm"
        >
          {{ item }}
        </div>
      </div>
    </div>
  </div>
</template>

Instalasi

Kalau project Anda disiapkan lewat npx shadcn-vue@latest init, scroll-fade sudah tersedia. Utility ini ikut dalam paket shadcn-vue, yang di-import CLI ke file CSS global Anda.

Kalau belum, pasang paket shadcn-vue:

npm install shadcn-vue

Lalu import utility bersamanya di file CSS global Anda:

@import "tailwindcss";
@import "shadcn-vue/tailwind.css";

Penggunaan

Class	Style
scroll-fade	mask-image: var(--scroll-fade-mask, var(--scroll-fade-block)); animation-timeline: scroll(self y);
scroll-fade-y	mask-image: var(--scroll-fade-mask, var(--scroll-fade-block)); animation-timeline: scroll(self y);
scroll-fade-x	mask-image: var(--scroll-fade-mask, var(--scroll-fade-inline)); animation-timeline: scroll(self inline);
scroll-fade-t	Mask pudar di tepi atas. animation-timeline: scroll(self y);
scroll-fade-b	Mask pudar di tepi bawah. animation-timeline: scroll(self y);
scroll-fade-l	Mask pudar di tepi kiri. animation-timeline: scroll(self x);
scroll-fade-r	Mask pudar di tepi kanan. animation-timeline: scroll(self x);
scroll-fade-s	Mask pudar di tepi awal, ikut terbalik pada RTL. animation-timeline: scroll(self inline);
scroll-fade-e	Mask pudar di tepi akhir, ikut terbalik pada RTL. animation-timeline: scroll(self inline);
scroll-fade-<number>	--scroll-fade-size: calc(var(--spacing) * <number>);
scroll-fade-[<value>]	--scroll-fade-size: <value>;
scroll-fade-{t,b,s,e}-<number>	--scroll-fade-{t,b,s,e}-size: calc(var(--spacing) * <number>);
scroll-fade-{t,b,s,e}-[<value>]	--scroll-fade-{t,b,s,e}-size: <value>;
scroll-fade-none	--scroll-fade-mask: none;

Tambahkan scroll-fade atau scroll-fade-y pada wadah gulirnya — yaitu elemen yang punya overflow-y-auto.

<template>
  <div class="scroll-fade overflow-y-auto">
    <!-- ... -->
  </div>
</template>

Efek pudarnya mengikuti posisi gulir:

• Saat diam, tepi atas tetap tajam sementara tepi bawah memudar sebagai isyarat masih ada konten lain.
• Saat digulir, tepi atas ikut memudar, dan di tengah gulir kedua tepinya sama-sama pudar.
• Di ujung akhir, tepi bawah kembali tajam untuk menandakan Anda sudah sampai item terakhir.

Efek pudarnya diterapkan lewat mask-image, jadi ia melarutkan kontennya sendiri, bukan menimpanya dengan warna. Mask-nya memakai gradasi linear dari transparan ke hitam, sehingga menyesuaikan latar apa pun tanpa perlu diatur. Kalau area gulir Anda berada di dalam sebuah card, taruh latar dan garis tepinya di elemen pembungkus, dan scroll-fade di area gulir bagian dalam — supaya yang larut adalah kontennya, bukan card-nya.

Komponen ScrollArea dan MessageScroller bisa memakai scroll-fade pada area gulirnya.

Tidak Melimpah, Tidak Memudar

Kalau kontennya tidak melebihi wadah, efek pudarnya tidak muncul. Jadi scroll-fade bisa Anda pasang di daftar mana pun tanpa perlu mengecek apakah daftar itu bisa digulir.

Item 1

Item 2

Item 3

<script setup lang="ts">
const items = Array.from({ length: 3 }, (_, index) => `Item ${index + 1}`)
</script>

<template>
  <div class="mx-auto w-full max-w-xs overflow-hidden rounded-2xl border">
    <div class="scroll-fade scrollbar-none overflow-y-auto">
      <div class="flex flex-col gap-1.5 p-1.5">
        <div
          v-for="item in items"
          :key="item"
          class="rounded-lg bg-muted px-3 py-2.5 text-sm"
        >
          {{ item }}
        </div>
      </div>
    </div>
  </div>
</template>

Gulir Mendatar

Pakai scroll-fade-x pada wadah yang bergulir mendatar — yaitu elemen yang punya overflow-x-auto.

Design

Engineering

Marketing

Product

Research

Sales

Support

Operations

Finance

Legal

People

Security

<script setup lang="ts">
const tags = [
  'Design',
  'Engineering',
  'Marketing',
  'Product',
  'Research',
  'Sales',
  'Support',
  'Operations',
  'Finance',
  'Legal',
  'People',
  'Security',
]
</script>

<template>
  <div class="mx-auto w-full max-w-xs overflow-hidden rounded-2xl border">
    <div class="scroll-fade-x scrollbar-none overflow-x-auto">
      <div class="flex w-max gap-1.5 p-1.5">
        <div
          v-for="tag in tags"
          :key="tag"
          class="shrink-0 rounded-lg bg-muted px-3 py-2.5 text-sm"
        >
          {{ tag }}
        </div>
      </div>
    </div>
  </div>
</template>

<template>
  <div class="flex scroll-fade-x overflow-x-auto">
    <!-- ... -->
  </div>
</template>

Efek pudar mendatarnya sadar arah baca. Pada tata letak RTL, tepi yang tajam dan yang memudar otomatis mengikuti arah baca tanpa class tambahan. scroll-fade-<angka> dan scroll-fade-none bekerja sama untuk kedua sumbu.

Pudar per Tepi

Pakai utility per tepi kalau hanya satu tepi yang perlu mengikuti posisi gulir.

Inbox triage

Design review

API contract

QA pass

Launch notes

Metrics follow-up

scroll-fade-t

Inbox triage

Design review

API contract

QA pass

Launch notes

Metrics follow-up

scroll-fade-b

Design

Engineering

Marketing

Product

Research

Sales

Support

Operations

scroll-fade-s

Design

Engineering

Marketing

Product

Research

Sales

Support

Operations

scroll-fade-e

<script setup lang="ts">
const items = [
  'Inbox triage',
  'Design review',
  'API contract',
  'QA pass',
  'Launch notes',
  'Metrics follow-up',
]

const tags = [
  'Design',
  'Engineering',
  'Marketing',
  'Product',
  'Research',
  'Sales',
  'Support',
  'Operations',
]
</script>

<template>
  <div class="mx-auto flex max-w-xs min-w-0 flex-col gap-6">
    <div class="flex flex-col gap-3">
      <div class="overflow-hidden rounded-2xl border">
        <div class="scroll-fade-t scrollbar-none h-36 overflow-y-auto">
          <div class="flex flex-col gap-1.5 p-1.5">
            <div
              v-for="item in items"
              :key="item"
              class="rounded-lg bg-muted px-3 py-2.5 text-sm"
            >
              {{ item }}
            </div>
          </div>
        </div>
      </div>
      <p class="text-center font-mono text-xs text-muted-foreground">
        scroll-fade-t
      </p>
    </div>
    <div class="flex flex-col gap-3">
      <div class="overflow-hidden rounded-2xl border">
        <div class="scroll-fade-b scrollbar-none h-36 overflow-y-auto">
          <div class="flex flex-col gap-1.5 p-1.5">
            <div
              v-for="item in items"
              :key="item"
              class="rounded-lg bg-muted px-3 py-2.5 text-sm"
            >
              {{ item }}
            </div>
          </div>
        </div>
      </div>
      <p class="text-center font-mono text-xs text-muted-foreground">
        scroll-fade-b
      </p>
    </div>
    <div class="flex flex-col gap-3">
      <div class="overflow-hidden rounded-2xl border">
        <div class="scroll-fade-s scrollbar-none overflow-x-auto">
          <div class="flex w-max gap-1.5 p-1.5">
            <div
              v-for="tag in tags"
              :key="tag"
              class="shrink-0 rounded-xl bg-muted px-4 py-2.5 text-sm"
            >
              {{ tag }}
            </div>
          </div>
        </div>
      </div>
      <p class="text-center font-mono text-xs text-muted-foreground">
        scroll-fade-s
      </p>
    </div>
    <div class="flex flex-col gap-3">
      <div class="overflow-hidden rounded-2xl border">
        <div class="scroll-fade-e scrollbar-none overflow-x-auto">
          <div class="flex w-max gap-1.5 p-1.5">
            <div
              v-for="tag in tags"
              :key="tag"
              class="shrink-0 rounded-xl bg-muted px-4 py-2.5 text-sm"
            >
              {{ tag }}
            </div>
          </div>
        </div>
      </div>
      <p class="text-center font-mono text-xs text-muted-foreground">
        scroll-fade-e
      </p>
    </div>
  </div>
</template>

<template>
  <div class="scroll-fade-b overflow-y-auto">
    <!-- ... -->
  </div>
</template>

Utility per tepi ini mengikuti posisi gulir. Tepi awal mulai memudar setelah Anda menggulir menjauh dari awal, dan tepi akhir berhenti memudar begitu Anda sampai di ujung. Pakai scroll-fade-t, scroll-fade-b, scroll-fade-l, dan scroll-fade-r untuk tepi fisik; pakai scroll-fade-s dan scroll-fade-e untuk tepi logis yang ikut terbalik pada RTL.

Ukuran Pudar

Kedalaman pudarnya secara bawaan 12% dari tinggi wadah, dibatasi maksimal 40px supaya area gulir yang tinggi tetap terlihat halus. Pakai scroll-fade-<angka> kalau Anda ingin menetapkan ukuran tetap dari skala spacing, sama seperti cara kerja scroll-mt-<angka>.

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

scroll-fade-4

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

scroll-fade-24

<script setup lang="ts">
const items = Array.from({ length: 8 }, (_, index) => `Item ${index + 1}`)
</script>

<template>
  <div class="mx-auto flex w-full max-w-xs flex-col gap-6">
    <div class="flex flex-col gap-3">
      <div class="overflow-hidden rounded-2xl border">
        <div class="scroll-fade scroll-fade-4 scrollbar-none h-48 overflow-y-auto">
          <div class="flex flex-col gap-1.5 p-1.5">
            <div
              v-for="item in items"
              :key="item"
              class="rounded-lg bg-muted px-3 py-2.5 text-sm"
            >
              {{ item }}
            </div>
          </div>
        </div>
      </div>
      <p class="text-center font-mono text-xs text-muted-foreground">
        scroll-fade-4
      </p>
    </div>
    <div class="flex flex-col gap-3">
      <div class="overflow-hidden rounded-2xl border">
        <div class="scroll-fade scroll-fade-24 scrollbar-none h-48 overflow-y-auto">
          <div class="flex flex-col gap-1.5 p-1.5">
            <div
              v-for="item in items"
              :key="item"
              class="rounded-lg bg-muted px-3 py-2.5 text-sm"
            >
              {{ item }}
            </div>
          </div>
        </div>
      </div>
      <p class="text-center font-mono text-xs text-muted-foreground">
        scroll-fade-24
      </p>
    </div>
  </div>
</template>

<template>
  <div class="scroll-fade scroll-fade-24 overflow-y-auto">
    <!-- ... -->
  </div>
</template>

Untuk nilai sekali pakai, gunakan panjang atau persentase bebas:

<template>
  <div class="scroll-fade scroll-fade-[15%] overflow-y-auto">
    <!-- ... -->
  </div>
</template>

Untuk memudarkan tepi yang berseberangan dengan takaran berbeda, pakai modifier per tepi: scroll-fade-t-<angka>, scroll-fade-b-<angka>, scroll-fade-s-<angka>, dan scroll-fade-e-<angka>. Semuanya menimpa scroll-fade-<angka> pada tepi yang disasar, dan menerima nilai bebas juga.

<template>
  <div class="scroll-fade scroll-fade-b-8 scroll-fade-t-2 overflow-y-auto">
    <!-- ... -->
  </div>
</template>

Untuk area gulir mendatar, pakai modifier logis s/e supaya ukurannya ikut terbalik pada RTL.

Efek pudarnya muncul dan hilang secara bertahap sepanjang jarak gulir tertentu, bukan seketika. Jarak itu diatur variabel --scroll-fade-reveal, bawaannya 96px dan terpisah dari kedalaman pudarnya. Perkecil supaya lebih cepat muncul, perbesar supaya lebih bertahap:

<template>
  <div class="scroll-fade overflow-y-auto [--scroll-fade-reveal:64px]">
    <!-- ... -->
  </div>
</template>

Mematikan Efek Pudar

Pakai scroll-fade-none untuk menghilangkan efek pudarnya. Urutan class-nya tidak berpengaruh, jadi biasanya dipakai secara responsif atau bergantung state:

<template>
  <div class="scroll-fade overflow-y-auto md:scroll-fade-none">
    <!-- ... -->
  </div>
</template>

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

scroll-fade

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

scroll-fade scroll-fade-none

<script setup lang="ts">
const items = Array.from({ length: 8 }, (_, index) => `Item ${index + 1}`)
</script>

<template>
  <div class="mx-auto flex w-full max-w-xs min-w-0 flex-col gap-6">
    <div class="flex flex-col gap-3">
      <div class="overflow-hidden rounded-2xl border">
        <div class="scroll-fade scrollbar-none h-48 overflow-y-auto">
          <div class="flex flex-col gap-1.5 p-1.5">
            <div
              v-for="item in items"
              :key="item"
              class="rounded-lg bg-muted px-3 py-2.5 text-sm"
            >
              {{ item }}
            </div>
          </div>
        </div>
      </div>
      <p class="text-center font-mono text-xs text-muted-foreground">
        scroll-fade
      </p>
    </div>
    <div class="flex flex-col gap-3">
      <div class="overflow-hidden rounded-2xl border">
        <div class="scroll-fade scroll-fade-none scrollbar-none h-48 overflow-y-auto">
          <div class="flex flex-col gap-1.5 p-1.5">
            <div
              v-for="item in items"
              :key="item"
              class="rounded-lg bg-muted px-3 py-2.5 text-sm"
            >
              {{ item }}
            </div>
          </div>
        </div>
      </div>
      <p class="text-center font-mono text-xs text-muted-foreground">
        scroll-fade scroll-fade-none
      </p>
    </div>
  </div>
</template>

Kalau Browser Belum Mendukung

Perilaku yang mengikuti gulir ini dibangun dengan animasi CSS berbasis gulir — tanpa JavaScript dan tanpa scroll listener. Di browser yang belum mendukungnya, scroll-fade turun menjadi pudar statis di kedua tepi, dan utility per tepi menjadi pudar statis di tepi yang dipilih.

Karena mask-nya dipasang di wadah gulirnya sendiri, scrollbar yang terlihat ikut memudar bersama konten di tepinya. Padukan scroll-fade dengan scrollbar-none — tersedia di paket yang sama — kalau Anda ingin menyembunyikan scrollbar sepenuhnya.

RTL

scroll-fade-x mengikuti arah baca. Saat diam, tepi awal tajam dan tepi akhir memudar. Pada tata letak RTL itu berarti tepi kanan yang tajam dan tepi kiri yang memudar — kebalikan dari LTR.

Design

Engineering

Marketing

Product

Research

Sales

Support

Operations

Finance

Legal

dir="ltr"

تصميم

هندسة

تسويق

منتج

أبحاث

مبيعات

دعم

عمليات

مالية

قانوني

dir="rtl"

<script setup lang="ts">
const ltrTags = [
  'Design',
  'Engineering',
  'Marketing',
  'Product',
  'Research',
  'Sales',
  'Support',
  'Operations',
  'Finance',
  'Legal',
]

const rtlTags = [
  'تصميم',
  'هندسة',
  'تسويق',
  'منتج',
  'أبحاث',
  'مبيعات',
  'دعم',
  'عمليات',
  'مالية',
  'قانوني',
]
</script>

<template>
  <div class="mx-auto grid w-full max-w-lg gap-6 sm:grid-cols-2">
    <div class="flex flex-col gap-3">
      <div dir="ltr" class="overflow-hidden rounded-2xl border">
        <div class="scroll-fade-x scrollbar-none overflow-x-auto">
          <div class="flex w-max gap-1.5 p-1.5">
            <div
              v-for="tag in ltrTags"
              :key="tag"
              class="shrink-0 rounded-lg bg-muted px-3 py-2.5 text-sm"
            >
              {{ tag }}
            </div>
          </div>
        </div>
      </div>
      <p class="text-center font-mono text-xs text-muted-foreground">
        dir="ltr"
      </p>
    </div>
    <div class="flex flex-col gap-3">
      <div dir="rtl" class="overflow-hidden rounded-2xl border">
        <div class="scroll-fade-x scrollbar-none overflow-x-auto">
          <div class="flex w-max gap-1.5 p-1.5">
            <div
              v-for="tag in rtlTags"
              :key="tag"
              class="shrink-0 rounded-lg bg-muted px-3 py-2.5 text-sm"
            >
              {{ tag }}
            </div>
          </div>
        </div>
      </div>
      <p class="text-center font-mono text-xs text-muted-foreground">
        dir="rtl"
      </p>
    </div>
  </div>
</template>