ScrollArea 滚动容器
自定义主题滚动条容器,scrollbar-gutter stable + overscroll-behavior contain,支持 Y / X / 双向。
基础用法
把可能溢出的内容塞进 CfScrollArea,限制 maxHeight / maxWidth 触发滚动。组件已经处理:
scrollbar-width: thin/scrollbar-gutter: stable— 避免出现 / 隐藏滚动条时的布局抖动overscroll-behavior: contain— 不把滚动事件冒泡到外层- webkit 主题化滚动条(与 token 配色一致)
- 第 1 项 — Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- 第 2 项 — Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- 第 3 项 — Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- 第 4 项 — Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- 第 5 项 — Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- 第 6 项 — Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- 第 7 项 — Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- 第 8 项 — Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- 第 9 项 — Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- 第 10 项 — Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- 第 11 项 — Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- 第 12 项 — Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- 第 13 项 — Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- 第 14 项 — Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- 第 15 项 — Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- 第 16 项 — Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- 第 17 项 — Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- 第 18 项 — Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- 第 19 项 — Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- 第 20 项 — Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- 第 21 项 — Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- 第 22 项 — Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- 第 23 项 — Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- 第 24 项 — Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- 第 25 项 — Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- 第 26 项 — Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- 第 27 项 — Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- 第 28 项 — Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- 第 29 项 — Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- 第 30 项 — Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<CfScrollArea bordered :max-height="200" :max-width="420">
<ul>
<li v-for="i in 30" :key="i">第 {{ i }} 项 — Lorem ipsum...</li>
</ul>
</CfScrollArea> <CfScrollArea bordered maxHeight={200} maxWidth={420}>
<ul>
{Array.from({ length: 30 }).map((_, i) => (
<li key={i}>第 {i + 1} 项 — Lorem ipsum...</li>
))}
</ul>
</CfScrollArea> 横向滚动
axis="x" 把滚动方向锁成横向;适合 tag 长列表、表格预览、命令历史等。
tag-1tag-2tag-3tag-4tag-5tag-6tag-7tag-8tag-9tag-10tag-11tag-12tag-13tag-14tag-15tag-16tag-17tag-18tag-19tag-20tag-21tag-22tag-23tag-24
<CfScrollArea bordered axis="x" :max-width="420">
<div style="display: flex; gap: 6px; white-space: nowrap;">
<span v-for="t in tags" :key="t">{{ t }}</span>
</div>
</CfScrollArea> <CfScrollArea bordered axis="x" maxWidth={420}>
<div style={{ display: 'flex', gap: 6, whiteSpace: 'nowrap' }}>
{tags.map((t) => <span key={t}>{t}</span>)}
</div>
</CfScrollArea> 双向滚动
axis="both" —— 横竖都滚。常见于表格 / 矩阵 / 时间轴。
R1·C1
R1·C2
R1·C3
R1·C4
R1·C5
R1·C6
R1·C7
R1·C8
R1·C9
R1·C10
R1·C11
R1·C12
R2·C1
R2·C2
R2·C3
R2·C4
R2·C5
R2·C6
R2·C7
R2·C8
R2·C9
R2·C10
R2·C11
R2·C12
R3·C1
R3·C2
R3·C3
R3·C4
R3·C5
R3·C6
R3·C7
R3·C8
R3·C9
R3·C10
R3·C11
R3·C12
R4·C1
R4·C2
R4·C3
R4·C4
R4·C5
R4·C6
R4·C7
R4·C8
R4·C9
R4·C10
R4·C11
R4·C12
R5·C1
R5·C2
R5·C3
R5·C4
R5·C5
R5·C6
R5·C7
R5·C8
R5·C9
R5·C10
R5·C11
R5·C12
R6·C1
R6·C2
R6·C3
R6·C4
R6·C5
R6·C6
R6·C7
R6·C8
R6·C9
R6·C10
R6·C11
R6·C12
R7·C1
R7·C2
R7·C3
R7·C4
R7·C5
R7·C6
R7·C7
R7·C8
R7·C9
R7·C10
R7·C11
R7·C12
R8·C1
R8·C2
R8·C3
R8·C4
R8·C5
R8·C6
R8·C7
R8·C8
R8·C9
R8·C10
R8·C11
R8·C12
R9·C1
R9·C2
R9·C3
R9·C4
R9·C5
R9·C6
R9·C7
R9·C8
R9·C9
R9·C10
R9·C11
R9·C12
R10·C1
R10·C2
R10·C3
R10·C4
R10·C5
R10·C6
R10·C7
R10·C8
R10·C9
R10·C10
R10·C11
R10·C12
R11·C1
R11·C2
R11·C3
R11·C4
R11·C5
R11·C6
R11·C7
R11·C8
R11·C9
R11·C10
R11·C11
R11·C12
R12·C1
R12·C2
R12·C3
R12·C4
R12·C5
R12·C6
R12·C7
R12·C8
R12·C9
R12·C10
R12·C11
R12·C12
R13·C1
R13·C2
R13·C3
R13·C4
R13·C5
R13·C6
R13·C7
R13·C8
R13·C9
R13·C10
R13·C11
R13·C12
R14·C1
R14·C2
R14·C3
R14·C4
R14·C5
R14·C6
R14·C7
R14·C8
R14·C9
R14·C10
R14·C11
R14·C12
R15·C1
R15·C2
R15·C3
R15·C4
R15·C5
R15·C6
R15·C7
R15·C8
R15·C9
R15·C10
R15·C11
R15·C12
R16·C1
R16·C2
R16·C3
R16·C4
R16·C5
R16·C6
R16·C7
R16·C8
R16·C9
R16·C10
R16·C11
R16·C12
R17·C1
R17·C2
R17·C3
R17·C4
R17·C5
R17·C6
R17·C7
R17·C8
R17·C9
R17·C10
R17·C11
R17·C12
R18·C1
R18·C2
R18·C3
R18·C4
R18·C5
R18·C6
R18·C7
R18·C8
R18·C9
R18·C10
R18·C11
R18·C12
<CfScrollArea bordered axis="both" :max-width="420" :max-height="200">
<div>{/* 18 × 12 网格 */}</div>
</CfScrollArea> <CfScrollArea bordered axis="both" maxWidth={420} maxHeight={200}>
<div>{/* 18 × 12 网格 */}</div>
</CfScrollArea> API
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
maxHeight | number | string | — | 容器最大高度 |
maxWidth | number | string | — | 容器最大宽度 |
axis | 'y' | 'x' | 'both' | 'y' | 滚动方向 |
size | 'sm' | 'md' | 'lg' | 'md' | 滚动条粗细(仅 webkit) |
bordered | boolean | false | 显示外描边和圆角 |
反馈与讨论
ScrollArea 滚动容器 的讨论