组件 · 布局

ScrollArea 滚动区域

自定义滚动条的滚动容器。

入口 @selrux/ui/scroll-area · 源码 src/components/scroll-area/index.ts · 5 个组件 · 发布状态 preview

使用建议

  • 避免:嵌套双滚动导致滚动链断裂
  • 限制:属性与导出以 @selrux/ui 对应子路径 d.ts/源码为准,禁止臆造

引入

tsx
import {
  ScrollArea,
  ScrollAreaCorner,
  ScrollAreaScrollbar,
  ScrollAreaThumb,
  ScrollAreaViewport,
} from '@selrux/ui/scroll-area';

演练场

调节下方可实现的字面量属性,实时预览真实组件。函数、Portal、样式逃生口等见代码演示与 API 表。

版本记录 v1.0

版本记录 v1.1

版本记录 v1.2

版本记录 v1.3

版本记录 v1.4

版本记录 v1.5

版本记录 v1.6

版本记录 v1.7

版本记录 v1.8

版本记录 v1.9

版本记录 v1.10

版本记录 v1.11

版本记录 v1.12

版本记录 v1.13

版本记录 v1.14

版本记录 v1.15

版本记录 v1.16

版本记录 v1.17

版本记录 v1.18

版本记录 v1.19

版本记录 v1.20

版本记录 v1.21

版本记录 v1.22

版本记录 v1.23

代码演示

基础用法

固定高度内滚动,滚动条使用组件样式。

版本记录 v1.0

版本记录 v1.1

版本记录 v1.2

版本记录 v1.3

版本记录 v1.4

版本记录 v1.5

版本记录 v1.6

版本记录 v1.7

版本记录 v1.8

版本记录 v1.9

版本记录 v1.10

版本记录 v1.11

版本记录 v1.12

版本记录 v1.13

版本记录 v1.14

版本记录 v1.15

版本记录 v1.16

版本记录 v1.17

版本记录 v1.18

版本记录 v1.19

版本记录 v1.20

版本记录 v1.21

版本记录 v1.22

版本记录 v1.23

版本记录 v1.24

版本记录 v1.25

版本记录 v1.26

版本记录 v1.27

版本记录 v1.28

版本记录 v1.29

尺寸

size 控制滚动条粗细。

size=sm 第 1 行

size=sm 第 2 行

size=sm 第 3 行

size=sm 第 4 行

size=sm 第 5 行

size=sm 第 6 行

size=sm 第 7 行

size=sm 第 8 行

size=sm 第 9 行

size=sm 第 10 行

size=sm 第 11 行

size=sm 第 12 行

size=sm 第 13 行

size=sm 第 14 行

size=sm 第 15 行

size=sm 第 16 行

size=sm 第 17 行

size=sm 第 18 行

size=sm 第 19 行

size=sm 第 20 行

size=lg 第 1 行

size=lg 第 2 行

size=lg 第 3 行

size=lg 第 4 行

size=lg 第 5 行

size=lg 第 6 行

size=lg 第 7 行

size=lg 第 8 行

size=lg 第 9 行

size=lg 第 10 行

size=lg 第 11 行

size=lg 第 12 行

size=lg 第 13 行

size=lg 第 14 行

size=lg 第 15 行

size=lg 第 16 行

size=lg 第 17 行

size=lg 第 18 行

size=lg 第 19 行

size=lg 第 20 行

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