Tinyrack

ScrollArea

native scrolling을 유지하는 사용자 정의 scrollbar 표면이에요.

핵심 속성

이 Tinyrack wrapper는 Base UI 동작, React 19 ref, native 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 고유 링크

예시

두 축 overflow 고유 링크

overflow되는 각 축에 scrollbar 하나를 렌더링하고 track이 만나는 곳에 Corner를 포함하세요.

가로 overflow 고유 링크

content가 inline axis에서 overflow할 때 horizontal track만 렌더링해요. Viewport의 native touch, trackpad, wheel, keyboard scrolling은 유지돼요.

자동 숨김 scrollbar 고유 링크

autoHide를 설정해 유휴 track을 숨기세요. viewport를 hover, scroll하거나 focus하면 다시 표시돼요. reduced-motion 설정은 opacity transition을 제거해요.

오른쪽에서 왼쪽 scrolling 고유 링크

DOM direction과 DirectionProvider를 동기화하여 horizontal wheel, track, thumb, overflow-edge 동작이 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 또는 두 축 overflow를 만드는 layout을 감싸요.
  • Scrollbar는 vertical 또는 horizontal track 하나를 렌더링하며 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를 보존해요.