Scroll Area
fandhe-frontend-pre-styled-ui の scroll_area mod が提供するスタイル済み Scroll Area 部品です。
CSS overflow を主体としたスクロール領域を提供する部品です。headless 層は anatomy と tabindex="0" のみを提供し、::-webkit-scrollbar 系規則でカスタムスクロールバーの見た目を表現します。JS によるスクロール位置追従は対象外です。
thumb 色は custom property --fandhe-scroll-area-thumb-bg で一元化されており、root へ再定義するだけで見た目を調整できます（hover 時・キーボードフォーカス時は --fandhe-scroll-area-thumb-hover-bg へ自動的に強調されます）。transparent を指定すれば、既定は非表示で hover 時のみ出現する見た目も再現できます。
viewport へ data-orientation="horizontal" を付与すると直下の content が横並びになり（shadcn/ui ScrollBar orientation="horizontal" 相当、gap/padding は呼び出し側が content へ指定）、data-fade を付与すると端が mask-image でフェードします（shadcn/ui utils/scroll-fade 相当。animation-timeline: scroll() 対応ブラウザではスクロール量に応じてフェード端が動的に切り替わり、非対応ブラウザは両端固定フェードになります。data-orientation="horizontal" 併用時は横方向グラデーション、dir="rtl" では方向が反転します）。いずれも既定の見た目を変えない opt-in で、フェード幅は custom property（--fandhe-scroll-area-fade-size・--fandhe-scroll-area-fade-reveal・--fandhe-scroll-area-fade-start/-end）で調整できます。詳細は下記 Features / Examples 節を参照してください。
関連 API: fandhe-frontend-pre-styled-ui API / fandhe-frontend-headless-ui API
Demo
CSS overflow を主体としたスクロール領域です。カスタムスクロールバーの見た目は scrollbar-width/scrollbar-color と ::-webkit-scrollbar 系規則で表現し、thumb 色は custom property --fandhe-scroll-area-thumb-bg で一元化しています（hover 時は --fandhe-scroll-area-thumb-hover-bg へ強調。JS によるスクロール位置追従は対象外）。data-orientation="horizontal"（横スクロール）・data-fade（端フェード、対応ブラウザではスクロール量に連動）は viewport への opt-in 属性です（イシュー #2054、shadcn/ui 突合）。
スクロール可能な行 1
スクロール可能な行 2
スクロール可能な行 3
スクロール可能な行 4
スクロール可能な行 5
スクロール可能な行 6
スクロール可能な行 7
スクロール可能な行 8
スクロール可能な行 9
スクロール可能な行 10
スクロール可能な行 11
スクロール可能な行 12
スクロール可能な行 13
スクロール可能な行 14
スクロール可能な行 15
スクロール可能な行 16
スクロール可能な行 17
スクロール可能な行 18
スクロール可能な行 19
スクロール可能な行 20
--fandhe-scroll-area-thumb-bg: transparent を指定すると、chakra-ui の variant="hover" 相当（既定は非表示、hover 時のみ出現）を再現できます。
スクロール可能な行 1
スクロール可能な行 2
スクロール可能な行 3
スクロール可能な行 4
スクロール可能な行 5
スクロール可能な行 6
スクロール可能な行 7
スクロール可能な行 8
スクロール可能な行 9
スクロール可能な行 10
スクロール可能な行 11
スクロール可能な行 12
スクロール可能な行 13
スクロール可能な行 14
スクロール可能な行 15
スクロール可能な行 16
スクロール可能な行 17
スクロール可能な行 18
スクロール可能な行 19
スクロール可能な行 20
viewport へ data-orientation="horizontal" を付与すると横スクロールになります（shadcn/ui ScrollBar orientation="horizontal" 相当）。
viewport へ data-fade を付与すると端がフェードします（shadcn/ui utils/scroll-fade 相当。animation-timeline: scroll() 対応ブラウザではスクロール量に応じて先頭/末尾のフェードが切り替わります）。
スクロール可能な行 1
スクロール可能な行 2
スクロール可能な行 3
スクロール可能な行 4
スクロール可能な行 5
スクロール可能な行 6
スクロール可能な行 7
スクロール可能な行 8
スクロール可能な行 9
スクロール可能な行 10
スクロール可能な行 11
スクロール可能な行 12
スクロール可能な行 13
スクロール可能な行 14
スクロール可能な行 15
スクロール可能な行 16
スクロール可能な行 17
スクロール可能な行 18
スクロール可能な行 19
スクロール可能な行 20
Features
- headless 層は anatomy（data-scope/data-part）と tabindex="0" のみを提供し、CSS overflow が実際のスクロール可能性を担う
- ::-webkit-scrollbar 系規則でカスタムスクロールバーの見た目を表現する
- thumb 色は custom property --fandhe-scroll-area-thumb-bg（既定 fg-subtle トークン。WCAG 非テキストコントラスト基準 3:1 を満たす、イシュー #1584 PR #1858 是正）で一元化されており、root へ再定義するだけで scrollbar-color と ::-webkit-scrollbar-thumb 双方の色を揃って変更できる
- viewport の hover 時・キーボードフォーカス時の双方で thumb 色を --fandhe-scroll-area-thumb-hover-bg（既定 fg）へ強調する（常時表示 + hover/focus 強調。タッチ端末でも thumb が不可視にならないよう hover-reveal は既定にしない、イシュー #1584）
- フォーカスリングは focus_ring_declarations（Token/Inset）による canonical 表現で、root の overflow: hidden 内に収まるよう内側描画にしている（イシュー #1584）
- variant（chakra の hover/always・Radix Themes の size/type 相当）は提供しない。custom property の上書きで同等の見た目を利用側から再現できる
- 横スクロール: viewport へ data-orientation="horizontal" を付与すると content が display: flex; width: max-content; になる（shadcn/ui ScrollBar orientation="horizontal" 相当、イシュー #2054）
- 端フェード: viewport へ data-fade を付与すると mask-image による端フェードが opt-in する。animation-timeline: scroll() 対応ブラウザでは @supports 配下でスクロール量に応じてフェード端を動的に切り替え、非対応ブラウザは両端固定フェードへ graceful degradation する（shadcn/ui utils/scroll-fade 相当、イシュー #2054）
- RTL 対応: data-fade + data-orientation="horizontal" 併用時は :dir(rtl) でグラデーション方向を反転する（イシュー #2054）
- JS によるスクロール位置追従は対象外（showcase.rs の scroll_area_section 記述と同方針）
Anatomy
root
viewport
contentAPI Reference
Data Attributes
| Part | Attribute | Observed Values |
|---|---|---|
viewport | data-fade | （値なし） |
viewport | data-orientation | horizontal |
CSS Variables
| Variable | Default |
|---|---|
--fandhe-scroll-area-fade-end | var(--fandhe-scroll-area-fade-end-driven, 0px) |
--fandhe-scroll-area-fade-end-driven | 0px |
--fandhe-scroll-area-fade-reveal | var(--fandhe-space-8, 2rem) |
--fandhe-scroll-area-fade-size | min(12%, var(--fandhe-space-10, 2.5rem)) |
--fandhe-scroll-area-fade-start | var(--fandhe-scroll-area-fade-start-driven, 0px) |
--fandhe-scroll-area-fade-start-driven | 0px |
--fandhe-scroll-area-scrollbar-size | 0.5rem |
--fandhe-scroll-area-thumb-bg | — |
--fandhe-scroll-area-thumb-hover-bg | var(--fandhe-color-fg, var(--fandhe-color-fg-subtle, var(--fandhe-color-border-emphasized, var(--fandhe-color-border)))) |
Examples
Scrollable list
固定高さのビューポート内に 5 行を表示するスクロール領域の例です。
Row 1
Row 2
Row 3
Row 4
Row 5
Tags
線区切りのタグリストの例です（イシュー #2054、shadcn/ui Tags 例相当）。
Tags
Tag 1
Tag 2
Tag 3
Tag 4
Tag 5
Horizontal scroll
data-orientation="horizontal" による横スクロールの例です（イシュー #2054）。
RTL + fade
dir="rtl" と data-fade を組み合わせた例です（イシュー #2054）。
行 1
行 2
行 3
行 4
行 5
Accessibility
WAI-ARIA
| Attribute | Description |
|---|---|
| tabindex="0"（viewport） | キーボードフォーカス可能にするのみで、固有の role/aria-* は出力しない。 |