组件 · 布局
ScrollArea 滚动区域
自定义滚动条的滚动容器。
使用建议
- 避免:嵌套双滚动导致滚动链断裂
- 限制:属性与导出以 @selrux/ui 对应子路径 d.ts/源码为准,禁止臆造
引入
tsx
import {
ScrollArea,
ScrollAreaCorner,
ScrollAreaScrollbar,
ScrollAreaThumb,
ScrollAreaViewport,
} from '@selrux/ui/scroll-area';演练场
调节下方可实现的字面量属性,实时预览真实组件。函数、Portal、样式逃生口等见代码演示与 API 表。
代码演示
基础用法
固定高度内滚动,滚动条使用组件样式。
尺寸
size 控制滚动条粗细。
API
属性覆盖:示例用到 2 / 2 个自有属性(100%)
由 scripts/demo-coverage.mjs 统计,不含 className / style / 原生透传属性与纯转发事件。
ScrollArea
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
size | - | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | - |
另有 280 项原生属性与事件继承自 HTMLAttributes,原样透传。
ScrollAreaCorner
无自有属性;其余 280 项原生属性继承自 HTMLAttributes。
ScrollAreaScrollbar
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
orientation | - | "horizontal" | "vertical" | - |
另有 280 项原生属性与事件继承自 HTMLAttributes,原样透传。
ScrollAreaThumb
无自有属性;其余 280 项原生属性继承自 HTMLAttributes。
ScrollAreaViewport
无自有属性;其余 280 项原生属性继承自 HTMLAttributes。
导出类型:ScrollAreaCornerProps、ScrollAreaProps、ScrollAreaScrollbarProps、ScrollAreaSize、ScrollAreaThumbProps、ScrollAreaViewportProps