ScrollArea.tsx

基本信息

• 类型: React 组件 (shadcn/ui)
• 路径: ./src/components/ui/scroll-area.tsx

功能描述

滚动区域组件，提供自定义样式的滚动条。基于 Radix UI，支持水平和垂直滚动。

导出内容

• ScrollArea - 滚动区域组件
• ScrollBar - 滚动条组件

Props 接口

ScrollArea

属性	类型	必填	默认值	说明
className	string	否	-	自定义CSS类名
children	React.ReactNode	是	-	子元素
...props	React.ComponentProps<typeof ScrollAreaPrimitive.Root>	否	-	Radix ScrollArea 属性

ScrollBar

属性	类型	必填	默认值	说明
orientation	`'vertical' \	'horizontal'`	否	'vertical'	滚动条方向
className	string	否	-	自定义CSS类名
...props	React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>	否	-	Scrollbar属性

依赖

• @radix-ui/react-scroll-area - Radix UI 滚动区域原语
• @/lib/utils - 工具函数 (cn)

使用示例

import { ScrollArea } from "@/components/ui/scroll-area";
import { ScrollBar } from "@/components/ui/scroll-area";

// 垂直滚动
<ScrollArea className="h-[200px] w-[350px] rounded-md border p-4">
  <div className="space-y-4">
    {longContent.map((item, i) => (
      <p key={i}>{item}</p>
    ))}
  </div>
</ScrollArea>

// 水平滚动
<ScrollArea className="w-96 whitespace-nowrap rounded-md border">
  <div className="flex w-max space-x-4 p-4">
    {items.map((item) => (
      <div key={item.id}>{item.name}</div>
    ))}
  </div>
  <ScrollBar orientation="horizontal" />
</ScrollArea>

// 双向滚动
<ScrollArea className="h-72 w-48 rounded-md border">
  <div className="w-[400px] p-4">
    {content}
  </div>
  <ScrollBar orientation="horizontal" />
</ScrollArea>