ScrollArea

<ScrollArea className="h-56 w-48 rounded-md border">
  <div className="p-4">
    <h4 className="mb-4 text-sm leading-none font-medium">태그</h4>
    <div className="text-sm">v1.2.0-beta.5</div>
    <Separator className="my-2" />
    <div className="text-sm">v1.2.0-beta.4</div>
    <Separator className="my-2" />
    {/* ... */}
  </div>
</ScrollArea>

<ScrollArea className="w-72 rounded-md border whitespace-nowrap">
  <div className="flex w-max space-x-4 p-4">
    <div className="bg-muted flex h-24 w-32 shrink-0 items-center justify-center rounded-md">
      항목 1
    </div>
    {/* ... */}
  </div>
  <ScrollBar orientation="horizontal" />
</ScrollArea>

import { useRef, useState, type CSSProperties } from "react"
import { ScrollArea } from "@vortex/ui-foundation"
 
function ScrollAreaViewportExample() {
  const rootRef = useRef<HTMLDivElement>(null)
  const viewportRef = useRef<HTMLDivElement>(null)
  const [position, setPosition] = useState({ top: 0, left: 0 })
  const [viewportEvents, setViewportEvents] = useState(0)
 
  return (
    <div className="space-y-3 p-4" data-testid="foundation-scroll-area-viewport">
      <ScrollArea
        ref={rootRef}
        viewportRef={viewportRef}
        scrollbars="both"
        className="h-56 w-80 max-w-full rounded-md border"
        style={{
          "--scroll-area-scrollbar-width-vertical": "14px",
          "--scroll-area-scrollbar-height-horizontal": "12px",
          "--scroll-area-thumb-background": "#7c3aed",
        } as CSSProperties}
        viewportProps={{
          "aria-label": "양방향 스크롤 예제",
          onScroll: () => setViewportEvents((count) => count + 1),
        }}
        onScroll={(event) => setPosition({
          top: Math.round(event.currentTarget.scrollTop),
          left: Math.round(event.currentTarget.scrollLeft),
        })}
      >
        <div className="space-y-3 p-4" style={{ width: 900, height: 700 }}>
          {Array.from({ length: 20 }, (_, i) => (
            <p key={i}>항목 {i + 1} — 가로·세로로 스크롤하여 Viewport 좌표를 확인하세요.</p>
          ))}
        </div>
      </ScrollArea>
      <button type="button" className="rounded border px-3 py-1 text-sm"
        onClick={() => viewportRef.current?.scrollTo({ top: 240, left: 160 })}>
        Viewport를 (160, 240)으로 이동
      </button>
      <p className="text-sm" role="status">
        scrollLeft: {position.left}px · scrollTop: {position.top}px · viewportProps.onScroll: {viewportEvents}회
      </p>
    </div>
  )
}