Scroll Area

• Accordion
• Alert
• Avatar
• Badge
• Bubble
• Button
• Calendar
• Card
• Carousel
• Checkbox
• Dialog
• Divider
• Drawer
• Dropdown
• Field
• Input
• Label
• Link
• Menu
• Pagination
• PopOver
• Progress
• ProgressStepper
• Radio
• Resizable
• ScrollArea
• Select
• Skeleton
• Slider
• Spinner
• Stepper
• Switch
• SegmentedControl
• Tabs
• Tag
• Textarea
• Toast
• Tooltip

계약

Overview

Machine-readable contract from Component Spec.

component: scroll-areaexport: ScrollAreaversion: 1attributes: data-refineui=scroll-area

Anatomy

Part	data-refineui
root	scroll-area
scrollbar	scroll-area-scrollbar
thumb	scroll-area-thumb
track	scroll-area-track
viewport	scroll-area-viewport

Variants

Axis	Values
type	hover, always

States

Scope	Category	Values
component	component	data-state: visible, hidden
component	environment	forced-colors, dir
scroll-area-scrollbar	component	data-state: visible, hidden

Layout

Property	Value
direction	logical
rtl	true

설치

npmyarnpnpmbun

npm install @refineui/react @refineui/tokens

사용법

import { ScrollArea, ScrollAreaViewport, ScrollAreaScrollbar, ScrollAreaThumb } from "@refineui/react";

<ScrollArea className="h-80">
  <ScrollAreaViewport>
    {/* Long content */}
  </ScrollAreaViewport>
  <ScrollAreaScrollbar orientation="vertical">
    <ScrollAreaThumb />
  </ScrollAreaScrollbar>
</ScrollArea>

<ScrollArea type="always">
  <ScrollAreaViewport>
    {/* Custom viewport */}
  </ScrollAreaViewport>
  <ScrollAreaScrollbar orientation="vertical">
    <ScrollAreaThumb />
  </ScrollAreaScrollbar>
  <ScrollAreaScrollbar orientation="horizontal">
    <ScrollAreaThumb />
  </ScrollAreaScrollbar>
</ScrollArea>

<ScrollArea className="h-80">
  <ScrollAreaViewport>
    {rows.map((row) => (
      <div key={row.id} data-scroll-edge-item>{row.label}</div>
    ))}
  </ScrollAreaViewport>
  <ScrollAreaScrollbar orientation="vertical">
    <ScrollAreaThumb />
  </ScrollAreaScrollbar>
</ScrollArea>

가장자리 효과

가장자리 효과는 항상 켜져 있습니다. data-scroll-edge-item이 붙은 행은 피커 휠의 가장자리처럼 흐려집니다 — 스크롤 영역 위아래 바깥쪽 4분의 1 구간에서 가장자리로 갈수록 점점 흐려지고(scrollEdge blur), 크기와 투명도는 바뀌지 않습니다. 실제로 내용이 가려진 가장자리 쪽에만 적용되므로, 스크롤되지 않는 목록이나 지금 붙어 있는 가장자리는 그대로이고, 스크롤해 멀어질수록 흐림이 서서히 나타납니다. 표시하지 않은 내용에는 적용되지 않습니다. 스크롤 연동 애니메이션(animation-timeline: view())이라 스크롤과 정확히 붙어 움직이며, 지원하지 않는 브라우저나 prefers-reduced-motion에서는 행이 그대로 보입니다. 뷰포트와 행 사이의 요소는 스크롤 컨테이너가 되면 안 됩니다 — overflow: hidden 대신 overflow: clip을 쓰세요. Command, Select, Dropdown, Sidebar가 행에 표시를 붙입니다.

API 레퍼런스

ScrollArea

Prop	Default	Type	Description
type	"hover"	"hover" | "always"	커스텀 스크롤바가 보이는 시점.

ScrollAreaViewport

뷰포트 컨테이너(스크롤 영역).

각 축은 해당 ScrollAreaScrollbar를 선언했을 때만 스크롤됩니다. 따라서 가로 전용 영역에서는 세로 휠 제스처가 영역에 갇히지 않고 페이지 스크롤로 전달됩니다. 뷰포트는 내용이 실제로 넘칠 때만 탭 스톱이 됩니다.

ScrollAreaScrollbar

Prop	Default	Type	Description
orientation	"vertical"	"vertical" | "horizontal"	스크롤바 방향.

ScrollAreaThumb

스크롤바 썸(드래그 핸들).