Scroll Area

一定の大きさの領域だけを、ページとは独立してスクロールする場合に使います。

プレビュー

コンポーネント状態のスクロール一覧

大きさを制限した一覧で、部品名、分類、例示用の状態バッジをスクロールして確認します。

NVDAアクセシビリティ準備完了

Dialogオーバーレイ準備完了

Data tableデータレビュー

Slider入力準備完了

Tooltipオーバーレイ準備完了

Calendar複合予定

Command複合予定

インストール

この Registry を初めて使う場合は、先に基本設定と共通スタイルの導入を完了してください。

npx shadcn@latest add @neumorphism-ui/scroll-area

共有 base を一度導入した後、CLI でコンポーネントと依存関係を追加します。

コンポーネント状態のスクロール一覧

npx shadcn@latest add @neumorphism-ui/badge @neumorphism-ui/scroll-area

Registry JSON

使い方

領域の高さか幅を制限し、通常どおり内容を表示します。独立した移動が必要なら名前とキーボードで入れるフォーカス位置を提供します。

"use client";

import { ScrollArea } from "@/components/ui/scroll-area";

export default function Example() {
  return (
    <ScrollArea className="h-40" tabIndex={0} aria-label="Recent activity">
      <ul className="grid gap-3 p-4">
        {Array.from({ length: 12 }, (_, index) => <li key={index}>Activity {index + 1}</li>)}
      </ul>
    </ScrollArea>
  );
}

API リファレンス

overflow-auto と native scrollbar を使用し、wheel、touch、keyboard、ブラウザー標準のアクセシビリティ動作を維持します。

コンポーネント	プロパティ	型	デフォルト	説明
`ScrollArea`	`className`	`string`	`—`	高さまたは幅を制限して overflow 領域を作ります。
`ScrollArea`	`tabIndex`	`number`	`—`	focusable な子要素がない場合に、キーボードスクロールの入口を提供します。
`ScrollArea`	`aria-label / aria-labelledby`	`string`	`—`	独立して移動できる領域である場合にコンテンツ名を指定します。