Scrollbar 滚动条
CSS-only 细窄主题滚动容器。Web 端自定义 thumb 外观，移动端自动回退浏览器原生滚动。
高度须由宿主控制（style="height: ..." 或 CSS class），否则内容不会溢出，滚动条无作用。
基础 · thin
1 — 默认 thin 细窄 thumb
2 — 默认 thin 细窄 thumb
3 — 默认 thin 细窄 thumb
4 — 默认 thin 细窄 thumb
5 — 默认 thin 细窄 thumb
6 — 默认 thin 细窄 thumb
7 — 默认 thin 细窄 thumb
8 — 默认 thin 细窄 thumb
9 — 默认 thin 细窄 thumb
10 — 默认 thin 细窄 thumb
11 — 默认 thin 细窄 thumb
12 — 默认 thin 细窄 thumb
13 — 默认 thin 细窄 thumb
14 — 默认 thin 细窄 thumb
<HScrollbar style="height: 120px">
<div v-for="i in 20" :key="i">行 {{ i }}</div>
</HScrollbar>mode（滚动条模式）
thin（默认）细窄主题 thumb · default 浏览器原生 · none 隐藏 thumb 仍可滚动。
thin
1
2
3
4
5
6
7
8
9
10
default
1
2
3
4
5
6
7
8
9
10
none（隐藏仍可滚）
1
2
3
4
5
6
7
8
9
10
<HScrollbar mode="thin" style="height: 100px">内容</HScrollbar>
<HScrollbar mode="default" style="height: 100px">内容</HScrollbar>
<HScrollbar mode="none" style="height: 100px">内容</HScrollbar>axis（方向）
y（默认纵向）· x（横向）· both（双向）。
y（纵向）
1
2
3
4
5
6
7
8
9
10
x（横向）
both（双向）
1
2
3
4
5
6
7
8
9
10
<HScrollbar axis="y" style="height: 100px">纵向内容</HScrollbar>
<HScrollbar axis="x" style="width: 220px">横向内容（需强制不换行）</HScrollbar>
<HScrollbar axis="both" style="height: 100px; width: 220px">双向溢出内容</HScrollbar>size（thumb 宽度）
sm 4px · md 6px（默认）· lg 8px。
sm · 4px
1
2
3
4
5
6
7
8
9
10
md · 6px（默认）
1
2
3
4
5
6
7
8
9
10
lg · 8px
1
2
3
4
5
6
7
8
9
10
<HScrollbar size="sm" style="height: 100px">sm</HScrollbar>
<HScrollbar size="md" style="height: 100px">md</HScrollbar>
<HScrollbar size="lg" style="height: 100px">lg</HScrollbar>color（主题色）
default（半透明灰）· primary · success · warning · danger。
default
1
2
3
4
5
6
7
8
9
10
primary
1
2
3
4
5
6
7
8
9
10
success
1
2
3
4
5
6
7
8
9
10
warning
1
2
3
4
5
6
7
8
9
10
danger
1
2
3
4
5
6
7
8
9
10
<HScrollbar color="primary" style="height: 100px">primary</HScrollbar>
<HScrollbar color="success" style="height: 100px">success</HScrollbar>
<HScrollbar color="warning" style="height: 100px">warning</HScrollbar>
<HScrollbar color="danger" style="height: 100px">danger</HScrollbar>API
Props
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
mode | 'thin' | 'default' | 'none' | 'thin' | 滚动条模式，DOM 写入 data-scrollbar |
axis | 'x' | 'y' | 'both' | 'y' | 溢出方向 |
size | 'sm' | 'md' | 'lg' | 'md' | thumb 宽度：4px / 6px / 8px |
color | 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'default' | thumb 主题色 |
ariaLabel | string | — | 滚动区域无障碍名 |
Slots
| 名称 | 作用域 | 说明 |
|---|---|---|
default | — | 滚动内容 |
行为说明
- 纯 CSS，无 JS thumb / 拖拽 / 事件 / SSR guard。
- 高度须由宿主控制（
style="height: ..."、max-height或 CSS class）。 - Chromium / Safari：
::-webkit-scrollbar伪元素自定义。Firefox：scrollbar-width: thin+scrollbar-color（无圆角）。 - 移动端（
hover: none+pointer: coarse）自动回退原生滚动，不强制自定义 thumb。 mode="none"隐藏 thumb，内容仍可滚（键盘 / wheel / touch）。