Tinyrack

ScrollArea

ネイティブスクロールを保つカスタムスクロールバーサーフェスです。

主なプロパティ

この Tinyrack wrapper は Base UI の動作、React 19 refs、ネイティブ scrolling、render contract を保ちます。Playground control は vertical、horizontal、two-axis content に対応します。

インストール

pnpm add @tinyrack/ui

長い行はコード領域を横にスクロールして確認できます。

スタイル

@import '@tinyrack/ui/components/scroll-area.css';

長い行はコード領域を横にスクロールして確認できます。

インポート

import { TRScrollArea } from '@tinyrack/ui/components/scroll-area';

長い行はコード領域を横にスクロールして確認できます。

プレイグラウンド

使用方法

縦方向の event log パーマリンク

例

2 軸 overflow パーマリンク

コンテンツがはみ出す軸ごとにスクロールバーを 1 つ描画し、トラックが交わる位置に Corner を配置します。

横方向 overflow パーマリンク

コンテンツがインライン軸方向にはみ出す場合は、横方向のトラックだけを描画します。Viewport に備わるタッチ、トラックパッド、ホイール、キーボードによるスクロール動作は維持されます。

自動非表示 scrollbar パーマリンク

`autoHide` を設定すると、操作されていないトラックが隠れます。ビューポートをホバー、スクロール、またはフォーカスすると再表示されます。視差効果を減らす設定では、不透明度のトランジションが無効になります。

右から左への scrolling パーマリンク

DOM の方向と DirectionProvider を同期し、横方向のホイール操作、トラック、サム、はみ出し端の動作に RTL 座標を使用します。

構造

  • Root は measurement、overflow-edge state、surface または plain の variant、任意の autoHide styling を所有します。
  • Viewport は native scroll container で、accessible name、keyboard focus、wheel、touch、trackpad input を受け取ります。
  • Content は vertical、horizontal、または 2 軸 overflow を作る layout を包みます。
  • Scrollbar は vertical または horizontal track を 1 本描画し、keepMounted で維持できます。
  • Thumb は Scrollbar 内の draggable position indicator です。
  • Corner は両方の scrollbar が存在し overflow するときに交点を埋めます。

API

PartProps と stateNotes
RootTRScrollAreaRootProps, variant, autoHide, overflowEdgeThreshold, render, ref既定は surface variant です。plain は surface border と content padding を取り除きます。
ViewportTRScrollAreaViewportProps, TRScrollAreaViewportState, render, refNative scroll container。Base UI は axis が overflow するときだけ focusable にします。
ContentTRScrollAreaContentProps, TRScrollAreaContentState, render, refintrinsic width を保ち horizontal overflow を有効にします。
ScrollbarTRScrollAreaScrollbarProps, TRScrollAreaScrollbarState, orientation, keepMounted, render, reforientation の既定は vertical。track wheel input は対応する viewport axis を scroll します。
ThumbTRScrollAreaThumbProps, TRScrollAreaThumbState, render, refdrag で native viewport scroll position を更新します。
CornerTRScrollAreaCornerProps, TRScrollAreaCornerState, render, ref両 axis が overflow している間だけ mount します。

Overflow は data-overflow-x-start、data-overflow-x-end、data-overflow-y-start、data-overflow-y-end に反映され、scrolling と track hover は data-scrolling と data-hovering を使用します。surface は --tr-scroll-area-background と --tr-scroll-area-color、track は --tr-scroll-area-track-background、thumb は --tr-scroll-area-indicator-background で customize できます。すべての part が consumer class、style、native prop、React 19 ref を保ちます。