Scroll Area

fandhe-frontend-pre-styled-ui の scroll_area mod が提供するスタイル済み Scroll Area 部品です。

CSS overflow を主体としたスクロール領域を提供する部品です。headless 層は anatomy と tabindex="0" のみを提供し、::-webkit-scrollbar 系規則でカスタムスクロールバーの見た目を表現します。JS によるスクロール位置追従は対象外です。

Demo

CSS overflow を主体としたスクロール領域です。カスタムスクロールバーの見た目は scrollbar-width/scrollbar-color と ::-webkit-scrollbar 系規則で表現します（JS によるスクロール位置追従は対象外）。

スクロール可能な行 1

スクロール可能な行 2

スクロール可能な行 3

スクロール可能な行 4

スクロール可能な行 5

スクロール可能な行 6

スクロール可能な行 7

スクロール可能な行 8

スクロール可能な行 9

スクロール可能な行 10

スクロール可能な行 11

スクロール可能な行 12

スクロール可能な行 13

スクロール可能な行 14

スクロール可能な行 15

スクロール可能な行 16

スクロール可能な行 17

スクロール可能な行 18

スクロール可能な行 19

スクロール可能な行 20

headless 層は anatomy（data-scope/data-part）と tabindex="0" のみを提供し、CSS overflow が実際のスクロール可能性を担う（crates/pre-styled-ui/src/scroll_area.rs:11）
::-webkit-scrollbar 系規則でカスタムスクロールバーの見た目を表現する（scroll_area.rs:124-134）
JS によるスクロール位置追従は対象外（showcase.rs の scroll_area_section 記述と同方針）

root
  viewport
    content

固定高さのビューポート内に 5 行を表示するスクロール領域の例です。

Row 1

Row 2

Row 3

Row 4

Row 5

Attribute	Description
tabindex="0"（viewport）	キーボードフォーカス可能にするのみで、固有の role/aria-* は出力しない（scroll_area.rs:11, 69）。