ScrollArea
scroll-area滚动区 · Base UI 自定义细滚动条 + 竖/横/双向
用法
纵向滚动
默认 orientation=vertical，内容超出容器高度时显示细滚动条。
tsx
<ScrollArea className="h-48 w-72 border border-border p-4">
{/* 超过容器高度的内容 */}
</ScrollArea>横向滚动
orientation=horizontal，配合一行 flex 卡片做横向浏览。
tsx
<ScrollArea orientation="horizontal" className="w-72 border border-border p-4">
<div className="flex gap-3">{/* 卡片们 */}</div>
</ScrollArea>双向滚动
orientation=both，同时出现横纵滚动条并在右下角补 corner。
tsx
<ScrollArea orientation="both" className="h-48 w-72 border border-border p-4">
{/* 又宽又高的内容 */}
</ScrollArea>何时用
需要在限定高/宽的区域内滚动、且想要跨平台一致的细滚动条（替代浏览器默认粗条）时用。它只管「滚动条样式 + 方向」；要拖拽改变区域大小用 Resizable，要按设备宽度做容器查询用 Viewport。
导入
ts
import { ScrollArea } from "@hulianui/ui"Props
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| orientation | "vertical" | "horizontal" | "both" | "vertical" | 滚动方向；both 时双向滚动条 + corner。 |
| className | string | — | 限高/限宽由消费者经此给 Root（如 h-48 / w-64），否则不会出现滚动。 |
Slots
| 插槽 | 类型 | 说明 |
|---|---|---|
| children | ReactNode | 滚动内容。 |
禁忌 / 坑
- 不给限高/限宽就不滚：组件不自带尺寸，必须经
className给 Root 限定h-*/w-*（横向则限w-*），否则内容撑开容器、滚动条永不出现。
相关
Layout · AdminLayout · Viewport · Resizable · AspectRatio · FitScreen
Playground
<ScrollArea className="h-48 w-72">
{/* 内容 */}
</ScrollArea>