Skip to content
fandhe-frontend
GitHub

Scroll Area

カスタムスクロール領域です。fandhe-frontend-headless-ui の scroll_area mod は Root / Viewport / Content / Scrollbar / Thumb / Corner の 6 anatomy パーツを提供し、viewport にはキーボードスクロール操作のための tabindex="0" を固定出力します。Themes 版と異なりスクロールバーの見た目（overflow の CSS 表現）を持たず、構造とフォーカス制御属性のみを担います。

スタイル済みの表示例は Scroll Area を参照してください。

関連 API: fandhe-frontend-headless-ui API

Demo

枠線・余白は docs サイト側のデモ枠であり、fandhe-frontend-headless-ui 自体はスタイルを持ちません。

Long scrollable content…

Features

  • Root / Viewport / Content / Scrollbar / Thumb / Corner の 6 anatomy パーツを提供し、CSS overflow を主体とするスクロール領域を表現する（scroll_area.rs:1-10）。
  • viewport は WAI 慣行（矢印キー/Page キーでフォーカス済み要素をスクロールできる）に従い tabindex="0" を固定出力する（scroll_area.rs:61-71）。
  • scrollbar/corner はネイティブスクロールバーと意味が重複する装飾要素のため aria-hidden="true" を固定出力する（scroll_area.rs:80-107）。
  • JS によるスクロール位置追従・thumb の drag 操作は本モジュールのスコープ外（静的マークアップの受け皿のみを提供、scroll_area.rs:21-32）。

Anatomy

root
  viewport
    content
  scrollbar
    thumb
  corner

API Reference

Arguments

NameTypeDefaultDescription
scrollbar/thumb: orientationOrientationdata-orientation 属性値（scroll_area.rs:85-97）。
viewport: attrs, childrenVec<(&str, &str)>, Vec<Node>vec![], vec![]tabindex="0" は固定出力のため呼び出し側から指定する引数ではない（scroll_area.rs:67-72）。

Data Attributes

PartAttributeObserved Values
scrollbardata-orientationvertical
thumbdata-orientationvertical

Examples

Horizontal scroll area

水平方向のスクロールバー配置例です（Demo は垂直方向）。

Wide scrollable content…

Accessibility

Keyboard Interactions

KeyDescription
Tabviewport は tabindex="0" を固定出力するため通常の Tab 順序に含まれる（scroll_area.rs:61-71）。矢印キー/Page キーによる実際のスクロール操作はブラウザネイティブの挙動に依拠し、本モジュールは属性出力のみを担う。

WAI-ARIA

AttributeDescription
aria-hidden="true"scrollbar/corner に固定出力する（scroll_area.rs:80-107）。thumb/viewport/content/root は role/aria-* を出力しない。