示例
直接操作示例，查看组件在具体任务中的状态与反馈。
本地活动记录
时间轴
本地画布
48rem × 24rem 本地画布
使用建议
先建立真实的尺寸边界
axis 只设置 overflow 方向；内容和容器之间存在实际尺寸差时才会滚动，因此应根据页面密度明确 maxHeight 或 maxWidth。
只在需要时创建可访问区域
组件不会自动添加 role、tabIndex 或可访问名称；当键盘用户需要直接滚动一个有意义的区域时，宿主再组合 region、名称和焦点停靠点。
保留浏览器原生滚动
不要拦截 wheel、touch 或键盘事件来模拟滚动；嵌套区域应尽量少，并保证内外焦点顺序和移动端触摸边界可理解。
引入方式
从已验证的公开子路径导入组件；全局样式接入方式见安装指南。
import { BaseScrollArea } from '@inf-monkeys-tech/monkeys-design/components/base';当前限制
- ScrollArea 不绘制自定义滚动条，不提供虚拟列表、滚动锁定、位置持久化、自动聚焦或滚动到项目的命令式 API。
- T17 尚缺真实 Chromium browser interaction、manual keyboard/focus、axe、deterministic visual、移动端/RTL 与 packed React 18/19 证据；原生滚动尺寸、嵌套焦点、触摸与双向溢出尚未完成最终闭环。
- Storybook browser scrolling/focus play, automated axe, manual keyboard/focus review, deterministic visual evidence, and packed React 18/19 checks are pending T17/T23.
API
查看组件源码export interface BaseScrollAreaProps
extends Omit<
HTMLAttributes<HTMLDivElement>,
'children' | 'className' | 'style'
> {
children?: ReactNode;
axis?: BaseScrollAreaAxis;
maxWidth?: BaseLayoutLength;
maxHeight?: BaseLayoutLength;
appearance?: BaseAppearance;
className?: string;
classNames?: BaseScrollAreaClassNames;
style?: CSSProperties;
}| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
children | 在 BaseScrollArea 内渲染的子内容；支持渲染函数时以对应的 Props 类型为准。 | ReactNode | — |
axis | 允许滚动的轴向。 | BaseScrollAreaAxis | 'y' |
maxWidth | 组件或内容区域允许使用的最大宽度。 | BaseLayoutLength | — |
maxHeight | 滚动区域允许使用的最大高度。 | BaseLayoutLength | — |
appearance | 覆盖组件使用的外观令牌或局部样式配置。 | BaseAppearance | — |
className | 追加到组件根元素的 CSS 类名。 | string | — |
classNames | 按组件公开的结构插槽分别追加 CSS 类名。 | BaseScrollAreaClassNames | — |
style | 追加到组件根元素的内联样式。 | CSSProperties | — |