zzzUI
English

Scroll area

使用 zzzUI 自有滚动条的滚动区域：细窄的轨道，配以与斜切块同样倾斜的滑块。

安装

terminal
# once per project: where @zzzui items come frompnpm dlx shadcn@latest registry add @zzzui=https://zzzui.catforest.dev/r/{name}.jsonpnpm dlx shadcn@latest add @zzzui/scroll-area

示例

路线日志

scroll-area-log.tsx
import { ScrollArea } from "@/components/zero/scroll-area";const log = Array.from({ length: 24 }, (_, index) => {  const minute = String(10 + index * 2).padStart(2, "0");  const stops = [    "Harbor",    "Rail yards",    "Canal docks",    "Tower 9",    "Old market",  ];  return `21:${minute.slice(-2)} · Passed ${stops[index % stops.length]}`;});export default function ScrollAreaLog() {  return (    <ScrollArea className="h-64 w-full max-w-xs border-(length:--zero-stroke-thin) border-zero-line bg-zero-void">      <ol className="grid gap-2 p-4 font-medium font-zero-text text-zero-sm text-zero-text-2">        {log.map((line) => (          <li key={line}>{line}</li>        ))}      </ol>    </ScrollArea>  );}

行为

滚动条平时隐藏，指针悬停或滚动时才出现；按住滑块时，滑块变为强调色。滚轮、触摸与键盘均可照常滚动；视口可获得焦点，以便通过键盘滚动。

需为 ScrollArea 设置高度或最大高度，内容在其内部滚动。

属性

ScrollArea

另可传入 Base UI ScrollArea.Root 的全部属性。

ScrollBar

属性类型默认值说明
orientation"vertical" | "horizontal""vertical"ScrollArea 会同时绘制横向与纵向滚动条；单独使用 ScrollBar 可自行搭建滚动区域。

另可传入 Base UI ScrollArea.Scrollbar 的全部属性。