ScrollArea / Sticky 滚动与粘性定位ScrollArea · Sticky
滚动完全是浏览器原生的：滚轮、触控板、拖动、键盘、滚到头带动外层，都不用脚本重做。ScrollArea 只做三件事：套上细而圆的滚动条外观、限定滚动方向、让区域能被键盘聚焦。Sticky 是 position: sticky 的薄封装。
ScrollArea
高度（或最大高度）由外层布局或 style 决定。有指针的设备上滚动条平时隐藏，指针移入或键盘聚焦时淡入；触屏保留系统自带的滚动条。
纵向
设计原则
品牌标志
色彩
字体
形状 · 间距 · 层级
动效
组件
令牌与用法
主题
无障碍
响应式
悬浮卡片
横向
一排放不下的标签、卡片。内容自己要有超出的宽度（这里用 width: max-content）。
全部设计前端无障碍动效响应式主题设计令牌组件库文档示例更新日志
ScrollArea 属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
direction | 'vertical' | 'horizontal' | 'both' | 'vertical' | 允许滚动的方向。 |
label | string | — | 读屏标签（等价于 aria-label）。 |
focusable | boolean | true | 键盘可聚焦：聚焦后用方向键、翻页键滚动。 |
…rest | HTMLAttributes | — | ref、className、style 和其余原生属性透传到根节点。 |
无障碍
- 默认 tabIndex=0：里面没有可聚焦的子元素时，键盘用户也能聚焦这个区域并用方向键、PageUp / PageDown、Home / End 滚动。
- 有名字（label、aria-label 或 aria-labelledby）时是 role="region"，否则是 role="group"。可滚动区域请给一个名字。
- 里面本来就有很多可聚焦元素、不想多一个 Tab 停靠点时，可以传 focusable={false}。
- 不需要组件时，给任何滚动容器加类名 ok-scroll 就有同样的滚动条外观。
Sticky
滚动时吸附在最近的滚动容器边缘。注意它吸附的是“最近的滚动祖先”：祖先上有 overflow: hidden 会让它失效。
吸在顶部的表头
设计原则
品牌标志
色彩
字体
形状 · 间距 · 层级
动效
组件
令牌与用法
主题
无障碍
响应式
悬浮卡片
Sticky 属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
as | ElementType | 'div' | 渲染成哪个元素。 |
edge | 'top' | 'bottom' | 'top' | 吸附在滚动容器的哪一边。 |
offset | Space | 0 | 距离那一边多远（间距档位）。 |
…rest | HTMLAttributes | — | ref、className、style 和其余原生属性透传到根节点。 |