スクロールする補足
表示領域を意図的に制限する時に ScrollArea を使います。
重要な操作を見えない位置に隠さず、スクロールが必要な領域だと分かるようにします。
長い補足文は、ページ全体を押し広げずにパネル内へ収められます。
このパターンは、補助情報、プレビュー、詳細説明などの二次的な内容に使います。
主要な操作が含まれる場合は、操作そのものをスクロール領域の外に置きます。
スクロール領域ScrollAreaExperimental
表示領域を意図的に制限し、縦横スクロールを一貫したスタイルで扱います。
プレビュー
状態とバリエーション
リスト
高さが決まったパネル内に長いリストを収めます。
本文
補足文や説明文をパネル内でスクロールさせます。
横スクロール
幅の広い項目列を、横方向のスクロールとして扱います。
縦横スクロール
横幅も高さも制限した表やワークスペースを、縦横両方にスクロールできます。
常時表示
スクロール可能であることを常に示したい場合に使います。
プロパティ
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| type | "auto" | "always" | "scroll" | "hover" | "hover" | スクロールバーの表示タイミングです。 |
| scrollHideDelay | number | 600 | スクロールバーが隠れるまでの遅延です。 |
| scrollbarOrientation | "vertical" | "horizontal" | "both" | "vertical" | 自動描画するスクロールバーの向きです。 |
| viewportClassName | string | - | viewport に追加する className です。 |
| scrollbarClassName | string | - | スクロールバーに追加する className です。 |
| thumbClassName | string | - | つまみに追加する className です。 |
使い方
import { ScrollArea, Separator } from "@gunjo/ui";
const releases = Array.from(
{ length: 18 },
(_, index) => "v2." + Math.floor((18 - index) / 3) + "." + (18 - index),
);
export function ReleaseList() {
return (
<ScrollArea className="h-56 w-full max-w-sm rounded-md border bg-background p-4">
<div className="mb-3 text-sm font-medium">リリース</div>
{releases.map((release) => (
<div key={release}>
<div className="text-sm">{release}</div>
<Separator className="my-2" />
</div>
))}
</ScrollArea>
);
}設計の判断
- 中身が縮められるように、土台の表組み表示を打ち消した。Radix の Viewport は、中の入れ物を表（table）として表示します。この形だと横幅が中身の最大幅で決まり、折り返せない長い1行があるだけで親からはみ出します。GUNJO は中の入れ物に
blockとmin-w-0とw-fullを上書きして、縮められる箱にしました。 - 横のつまみは、頼まれたときだけ作る。
scrollbarOrientationの既定は縦だけです。資料は「常時表示ではなく、溢れたときだけ出す指定を基本にする」と書いていますが、GUNJO ではもう一段強く、横向きのつまみはhorizontalかbothを渡したときにしか作りません。使わない軸のつまみが場所を取らないためです。 - 「右にまだ続く」ことを示す表現は入れていません。資料は、横スクロールは縦と違って気づかれにくいので、右端にぼかしや影を置いて続きがあると示すことを挙げています。GUNJO の
ScrollAreaにその表現はなく、scrollbarClassNameとthumbClassNameでつまみを目立たせるところまでです。ぼかしが要る画面は、いまは呼ぶ側で重ねます。
使用コンポーネント
関連コンポーネント
いつ・なぜ使うか（UIXHERO）
「いつ・なぜ使うか」の判断は、姉妹サイト UIXHERO の記事で解説しています。