Scroll Fade

export function ScrollFadeDemo() {
  return (
    <div className="mx-auto w-full max-w-xs overflow-hidden rounded-2xl border">

インストール#

npx shadcn@latest init でプロジェクトを設定している場合は、すでに scroll-fade を利用できます。shadcn パッケージに含まれており、CLI がグローバル CSS ファイルにインポートします。

それ以外の場合は、shadcn パッケージをインストールします。

pnpmnpmyarnbun
pnpm add shadcn
コピー

次に、共有ユーティリティをグローバル CSS ファイルにインポートします。

コピー@import "tailwindcss";
@import "shadcn/tailwind.css";

使い方#

scroll-fade または scroll-fade-y をスクロールコンテナー、つまり overflow-y-auto を持つ要素に追加します。

コピー<div className="scroll-fade overflow-y-auto">{/* ... */}</div>

フェードはスクロールを認識し、スクロール位置を追跡します。

• 静止時は上端が鮮明で、下端がフェードして続きのコンテンツを示します。
• スクロールすると、上部にフェードが表示され、スクロール中は両端がフェードしたままになります。
• 最後に、下のエッジが鋭くなり、最後の項目に到達したことが示されます。

フェードは mask-image で適用されるため、色をオーバーレイするのではなく、コンテンツ自体をディゾルブします。マスクは透明から黒への線形フェードを使用するため、設定なしであらゆる背景に適応します。スクロール領域がカード内にある場合は、背景と境界線をラッパーに配置し、scroll-fade を内側のスクローラーに配置します。これにより、フェードによってカードではなくコンテンツがディゾルブされます。

ScrollArea および MessageScroller コンポーネントは、スクロール可能なビューポートで scroll-fade を使用できます。

オーバーフローなし、フェードなし#

コンテンツがオーバーフローしていない場合、フェードは表示されません。スクロール可能か確認せず、任意のリストに scroll-fade を適用できます。

export function ScrollFadeOverflow() {
  return (
    <div className="mx-auto w-full max-w-xs overflow-hidden rounded-2xl border">

水平スクロール#

水平方向にスクロールするコンテナー、つまり overflow-x-auto を持つ要素で scroll-fade-x を使用します。

const tags = [
  "Design",
  "Engineering",

コピー<div className="flex scroll-fade-x overflow-x-auto">{/* ... */}</div>

水平フェードは方向を認識します。 RTL レイアウトでは、余分なクラスを必要とせずに、鮮明なエッジとフェードが読み取り方向に従います。 scroll-fade-<number> と scroll-fade-none は両方の軸で同じように機能します。

エッジ フェード#

1 つのエッジだけでスクロール位置を追跡する場合は、エッジ ユーティリティを使います。

const items = [
  "Inbox triage",
  "Design review",

コピー<div className="scroll-fade-b overflow-y-auto">{/* ... */}</div>

エッジ ユーティリティはスクロールを認識します。開始エッジは開始位置から離れるとフェードインし、終了エッジは末尾に到達するとフェードアウトします。物理エッジには scroll-fade-t、scroll-fade-b、scroll-fade-l、scroll-fade-r を使います。RTL で反転する論理インライン エッジには scroll-fade-s と scroll-fade-e を使います。

フェード サイズ#

フェード深度のデフォルトはコンテナーの 12% で、上限は 40px なので、縦長のスクローラーでも控えめな見た目のままです。代わりに、scroll-fade-<number> を使用して、scroll-mt-<number> の動作と同じように、間隔スケールに固定サイズを設定します。

export function ScrollFadeSize() {
  return (
    <div className="mx-auto flex w-full max-w-xs flex-col gap-6">

コピー<div className="scroll-fade overflow-y-auto scroll-fade-24">{/* ... */}</div>

一度だけ使う値には、任意の長さまたはパーセンテージを指定します。

コピー<div className="scroll-fade overflow-y-auto scroll-fade-[15%]">{/* ... */}</div>

向かい合うエッジを異なる量でフェードするには、エッジごとの修飾子 scroll-fade-t-<number>、scroll-fade-b-<number>、scroll-fade-s-<number>、scroll-fade-e-<number> を使います。対象エッジでは scroll-fade-<number> を上書きし、任意の値も受け取ります。

コピー<div className="scroll-fade overflow-y-auto scroll-fade-b-8 scroll-fade-t-2">
  {/* ... */}
</div>

水平スクローラーでは論理的な s/e 修飾子を使うと、RTL でサイズが反転します。

フェードは即座に表示されるのではなく、一定のスクロール距離に応じて徐々に現れたり消えたりします。その距離は --scroll-fade-reveal 変数 (デフォルトでは 96px) であり、フェード深度には関係ありません。よりきびきびとした表示にする場合は下げ、より緩やかな表示にする場合は上げます。

コピー<div className="scroll-fade overflow-y-auto [--scroll-fade-reveal:64px]">
  {/* ... */}
</div>

フェードを無効にする#

scroll-fade-none を使うとフェードを削除できます。クラスの順序に関係なく動作するため、レスポンシブまたは状態に応じた使い方ができます。

コピー<div className="scroll-fade overflow-y-auto md:scroll-fade-none">
  {/* ... */}
</div>

export function ScrollFadeNone() {
  return (
    <div className="mx-auto flex max-w-xs min-w-0 flex-col gap-6">

フォールバック#

スクロール認識動作は、JavaScript やスクロール リスナーを使わず、CSS スクロール駆動アニメーションで実装されています。スクロール駆動アニメーションに対応していないブラウザーでは、scroll-fade は両端の静的フェードにフォールバックし、エッジ ユーティリティは選択したエッジの静的フェードにフォールバックします。

マスクはスクロールコンテナー自体に適用されるため、表示されるスクロールバーは端のコンテンツとともにフェードアウトします。スクロールバーを完全に非表示にしたい場合は、同じパッケージに同梱されている scroll-fade を no-scrollbar と組み合わせます。

RTL#

shadcn/ui で RTL サポートを有効にするには、RTL 構成ガイドを参照してください。

scroll-fade-x は読み取り方向に従います。静止状態では、開始エッジは鮮明で、終了エッジは消えます。 RTL レイアウトでは、LTR からミラーリングされた、鮮明な右エッジと左のフェードを意味します。

"use client"

import {