Scroll Area

用于让固定大小的内容区域独立于页面滚动。

预览

可滚动的组件状态列表

在限制大小的列表中滚动查看组件名称、分类与示例就绪状态徽标。

NVDA无障碍就绪

Dialog浮层就绪

Data table数据待审核

Slider输入就绪

Tooltip浮层就绪

Calendar复合计划中

Command复合计划中

安装

首次使用此 Registry？请先完成基础配置与共享样式安装。

npx shadcn@latest add @neumorphism-ui/scroll-area

先安装一次共享 base，然后使用 CLI 添加组件及其依赖。

可滚动的组件状态列表

npx shadcn@latest add @neumorphism-ui/badge @neumorphism-ui/scroll-area

Registry JSON

用法

限制区域的高度或宽度，正常渲染内部内容。需要独立导航时，提供区域名称与键盘焦点入口。

"use client";

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

export default function Example() {
  return (
    <ScrollArea className="h-40" tabIndex={0} aria-label="Recent activity">
      <ul className="grid gap-3 p-4">
        {Array.from({ length: 12 }, (_, index) => <li key={index}>Activity {index + 1}</li>)}
      </ul>
    </ScrollArea>
  );
}

API 参考

使用 overflow-auto 和原生 scrollbar，完整保留滚轮、触控、键盘以及浏览器无障碍行为。

组件	属性	类型	默认值	说明
`ScrollArea`	`className`	`string`	`—`	限制高度或宽度以形成 overflow 区域。
`ScrollArea`	`tabIndex`	`number`	`—`	当内部没有 focusable 元素时，提供键盘滚动入口。
`ScrollArea`	`aria-label / aria-labelledby`	`string`	`—`	当该区域可独立浏览时，为其内容提供名称。