数据与反馈@neumorphism-ui/scroll-area

Scroll Area

使用 overflow-auto 和原生 scrollbar，完整保留滚轮、触控、键盘以及浏览器无障碍行为。ScrollBar export 是为兼容 shadcn 组合方式而保留的隐藏 placeholder。

@neumorphism-ui/scroll-area

Registry JSON

预览

NVDA无障碍就绪

Dialog浮层就绪

Data table数据待审核

Slider输入就绪

Tooltip浮层就绪

Calendar复合计划中

Command复合计划中

安装

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

CLI 会依次处理 npm 依赖、base token、utils 和组件源码。

首次使用此 Registry？请先完成 namespace 配置。

用法

Import

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

Example

<ScrollArea
  className="h-64 p-4"
  tabIndex={0}
  aria-label="最近动态"
>
  {activities.map((activity) => (
    <article key={activity.id}>{activity.title}</article>
  ))}
  <ScrollBar orientation="vertical" />
</ScrollArea>

API 参考

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