Scrollbar 滚动条

赛博朋克风格的自定义滚动条组件，边角凌厉、不圆滑，完全替代浏览器原生滚动条。支持垂直和水平双向滚动，提供拖拽、滚轮（含横向）、点击轨道跳转三种操作方式。横向内容可直接通过鼠标滚轮滚动，无需拖拽滑块。

基本用法

用 <cyber-scrollbar> 包裹需要滚动的内容，设置 height 限制可视高度。

[01] SYSTEM:// 日志条目 1 — 子系统运行正常，量子通讯延迟 12ms，护盾能量 98%

[02] SYSTEM:// 日志条目 2 — 子系统运行正常，量子通讯延迟 12ms，护盾能量 98%

[03] SYSTEM:// 日志条目 3 — 子系统运行正常，量子通讯延迟 12ms，护盾能量 98%

[04] SYSTEM:// 日志条目 4 — 子系统运行正常，量子通讯延迟 12ms，护盾能量 98%

[05] SYSTEM:// 日志条目 5 — 子系统运行正常，量子通讯延迟 12ms，护盾能量 98%

[06] SYSTEM:// 日志条目 6 — 子系统运行正常，量子通讯延迟 12ms，护盾能量 98%

[07] SYSTEM:// 日志条目 7 — 子系统运行正常，量子通讯延迟 12ms，护盾能量 98%

[08] SYSTEM:// 日志条目 8 — 子系统运行正常，量子通讯延迟 12ms，护盾能量 98%

[09] SYSTEM:// 日志条目 9 — 子系统运行正常，量子通讯延迟 12ms，护盾能量 98%

[10] SYSTEM:// 日志条目 10 — 子系统运行正常，量子通讯延迟 12ms，护盾能量 98%

[11] SYSTEM:// 日志条目 11 — 子系统运行正常，量子通讯延迟 12ms，护盾能量 98%

[12] SYSTEM:// 日志条目 12 — 子系统运行正常，量子通讯延迟 12ms，护盾能量 98%

<template>
  <cyber-scrollbar height="200px">
    <div style="padding: 16px;">
      <p v-for="i in 12" :key="i">
        [{{ i }}] 日志条目内容...
      </p>
    </div>
  </cyber-scrollbar>
</template>

横向滚动

内容宽度超出容器时，自动显示横向滚动条。

NODE-01

NODE-02

NODE-03

NODE-04

NODE-05

NODE-06

NODE-07

NODE-08

<template>
  <cyber-scrollbar height="120px">
    <div style="display: flex; gap: 12px;">
      <div v-for="i in 8" :key="i" class="card">
        NODE-{{ i }}
      </div>
    </div>
  </cyber-scrollbar>
</template>

主题切换

通过 theme 属性切换滑块主题色，支持 primary / success / warning / danger / info。

Success 主题 · 条目 1

Success 主题 · 条目 2

Success 主题 · 条目 3

Success 主题 · 条目 4

Success 主题 · 条目 5

Success 主题 · 条目 6

Success 主题 · 条目 7

Success 主题 · 条目 8

Danger 主题 · 条目 1

Danger 主题 · 条目 2

Danger 主题 · 条目 3

Danger 主题 · 条目 4

Danger 主题 · 条目 5

Danger 主题 · 条目 6

Danger 主题 · 条目 7

Danger 主题 · 条目 8

<template>
  <cyber-scrollbar height="150px" theme="success">
    <p v-for="i in 8" :key="i">Success 主题 · 条目 {{ i }}</p>
  </cyber-scrollbar>
  <cyber-scrollbar height="150px" theme="danger">
    <p v-for="i in 8" :key="i">Danger 主题 · 条目 {{ i }}</p>
  </cyber-scrollbar>
</template>

尺寸

size 属性控制滑块粗细，可选 small / default / large。

small 尺寸 · 行 1

small 尺寸 · 行 2

small 尺寸 · 行 3

small 尺寸 · 行 4

small 尺寸 · 行 5

small 尺寸 · 行 6

small 尺寸 · 行 7

small 尺寸 · 行 8

small 尺寸 · 行 9

small 尺寸 · 行 10

large 尺寸 · 行 1

large 尺寸 · 行 2

large 尺寸 · 行 3

large 尺寸 · 行 4

large 尺寸 · 行 5

large 尺寸 · 行 6

large 尺寸 · 行 7

large 尺寸 · 行 8

large 尺寸 · 行 9

large 尺寸 · 行 10

<template>
  <cyber-scrollbar height="120px" size="small">...</cyber-scrollbar>
  <cyber-scrollbar height="120px" size="large">...</cyber-scrollbar>
</template>

始终显示

设置 always 让滑块始终可见（默认仅 hover 时高亮）。

始终显示滚动条 · 条目 1

始终显示滚动条 · 条目 2

始终显示滚动条 · 条目 3

始终显示滚动条 · 条目 4

始终显示滚动条 · 条目 5

始终显示滚动条 · 条目 6

始终显示滚动条 · 条目 7

始终显示滚动条 · 条目 8

始终显示滚动条 · 条目 9

始终显示滚动条 · 条目 10

<template>
  <cyber-scrollbar height="120px" :always="true">
    <p v-for="i in 10" :key="i">始终显示 · 条目 {{ i }}</p>
  </cyber-scrollbar>
</template>

属性

属性	类型	默认值	说明
height	string | number	''	容器高度，不设置则继承父级高度
max-height	string | number	''	容器最大高度
theme	string	'primary'	滑块主题色：primary / success / warning / danger / info
size	string	'default'	滑块尺寸：small / default / large
always	boolean	false	是否始终高亮显示滑块

方法

方法	说明
update()	内容变化后手动刷新滚动条状态
scrollToY(y)	滚动到指定垂直位置
scrollToX(x)	滚动到指定水平位置