Scrollbar 滚动条
自定义滚动条样式组件，支持固定高度、最大高度、始终显示和原生回退模式。
基础用法
包裹内容即可获得自定义滚动条样式。
滚动内容第 1 行
滚动内容第 2 行
滚动内容第 3 行
滚动内容第 4 行
滚动内容第 5 行
滚动内容第 6 行
滚动内容第 7 行
滚动内容第 8 行
滚动内容第 9 行
滚动内容第 10 行
滚动内容第 11 行
滚动内容第 12 行
滚动内容第 13 行
滚动内容第 14 行
滚动内容第 15 行
滚动内容第 16 行
滚动内容第 17 行
滚动内容第 18 行
滚动内容第 19 行
滚动内容第 20 行
vue
<template>
<ZcScrollbar height="200px">
<div style="padding: 16px;">
<p v-for="i in 20" :key="i">滚动内容第 {{ i }} 行</p>
</div>
</ZcScrollbar>
</template>最大高度
使用 maxHeight 属性设置内容最大高度，内容不足时不显示滚动条。
最大高度内容第 1 行
最大高度内容第 2 行
最大高度内容第 3 行
最大高度内容第 4 行
最大高度内容第 5 行
最大高度内容第 6 行
最大高度内容第 7 行
最大高度内容第 8 行
最大高度内容第 9 行
最大高度内容第 10 行
最大高度内容第 11 行
最大高度内容第 12 行
最大高度内容第 13 行
最大高度内容第 14 行
最大高度内容第 15 行
vue
<template>
<ZcScrollbar max-height="200px">
<div style="padding: 16px;">
<p v-for="i in 15" :key="i">最大高度内容第 {{ i }} 行</p>
</div>
</ZcScrollbar>
</template>始终显示滚动条
默认滚动条在悬停时显示，通过 always 属性可以始终显示。
始终可见滚动条第 1 行
始终可见滚动条第 2 行
始终可见滚动条第 3 行
始终可见滚动条第 4 行
始终可见滚动条第 5 行
始终可见滚动条第 6 行
始终可见滚动条第 7 行
始终可见滚动条第 8 行
始终可见滚动条第 9 行
始终可见滚动条第 10 行
vue
<template>
<ZcScrollbar height="150px" always>
<div style="padding: 16px;">
<p v-for="i in 10" :key="i">始终可见滚动条第 {{ i }} 行</p>
</div>
</ZcScrollbar>
</template>原生滚动条
通过 native 属性使用浏览器原生滚动条。
原生滚动条第 1 行
原生滚动条第 2 行
原生滚动条第 3 行
原生滚动条第 4 行
原生滚动条第 5 行
原生滚动条第 6 行
原生滚动条第 7 行
原生滚动条第 8 行
原生滚动条第 9 行
原生滚动条第 10 行
vue
<template>
<ZcScrollbar height="150px" native>
<div style="padding: 16px;">
<p v-for="i in 10" :key="i">原生滚动条第 {{ i }} 行</p>
</div>
</ZcScrollbar>
</template>Scrollbar API
Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
height | 固定高度（数字自动转 px） | string | number | — |
maxHeight | 最大高度（数字自动转 px） | string | number | — |
native | 使用浏览器原生滚动条 | boolean | false |
always | 始终显示滚动条 | boolean | false |
minSize | 滚动条最小尺寸（px） | number | 20 |
tag | 容器元素标签 | string | 'div' |
Slots
| 插槽名 | 说明 |
|---|---|
default | 滚动区域内容 |