Skip to main content
PolyUI/docs
English

布局组件

ScrollArea 滚动区域

自定义样式的滚动容器，支持垂直和水平滚动，提供一致的跨浏览器滚动条外观。

安装

bash
pnpm dlx shadcn@latest add scroll-area -c packages/react

基础

tsx
import { ScrollArea } from "@polyui/react/scroll-area"
import { Separator } from "@polyui/react/separator"
export function ScrollAreaBasic() {
  const tags = Array.from({ length: 50 }, (_, i) => `Tag ${i + 1}`)
  return (
    <ScrollArea className="h-64 w-56 rounded-xl border border-border">
      <div className="p-4">
        <h4 className="mb-4 text-sm font-semibold">Tags</h4>
        {tags.map((tag, i) => (
          <div key={tag}>
            <div className="text-sm py-1">{tag}</div>
            {i < tags.length - 1 && <Separator className="my-1" />}
          </div>
        ))}
      </div>
    </ScrollArea>
  )
}

水平

tsx
import { ScrollArea, ScrollBar } from "@polyui/react/scroll-area"
export function ScrollAreaHorizontal() {
  const items = Array.from({ length: 20 }, (_, i) => `Item ${i + 1}`)
  return (
    <ScrollArea className="w-96 whitespace-nowrap rounded-xl border border-border">
      <div className="flex gap-4 p-4">
        {items.map((item) => (
          <div key={item} className="w-32 shrink-0 rounded-lg bg-muted p-4 text-sm">
            {item}
          </div>
        ))}
      </div>
      <ScrollBar orientation="horizontal" />
    </ScrollArea>
  )
}

Props

ScrollArea

属性类型默认值说明
classNamestring—自定义样式，通常用于设置宽高。
childrenReact.ReactNode—滚动区域内的内容。

ScrollBar

属性类型默认值说明
orientation"vertical" | "horizontal""vertical"滚动条方向。