Scroll 滚动容器
自定义滚动条容器，提供美观且功能丰富的滚动体验。
参数
Props
| 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| scrollX | boolean | true | 是否启用横向滚动 |
| scrollY | boolean | true | 是否启用纵向滚动 |
| scrollbarType | ScrollbarType | 'hover' | 滚动条显示方式 |
| size | number | 6 | 滚动条宽度 |
| trackColor | string | 'rgba(0, 0, 0, 0.05)' | 滚动条轨道颜色 |
| thumbColor | string | 'rgba(0, 0, 0, 0.2)' | 滚动条滑块颜色 |
| thumbHoverColor | string | 'rgba(0, 0, 0, 0.4)' | 滚动条悬停颜色 |
| contentClass | XClass | '' | 内容样式类 |
| contentStyle | XStyle | {} | 内容样式 |
Slots
| 名称 | 描述 | 参数 |
|---|---|---|
| default | 默认插槽，滚动容器内容 | - |
Events
| 名称 | 描述 | 参数 |
|---|---|---|
| scroll | 滚动事件 | (e: Event) => void |
| scroll-end | 滚动结束事件 | () => void |
示例
基础用法
滚动方向
滚动条样式
滚动条显示方式
TypeScript
ts
// 滚动条显示方式
export type ScrollbarType = "always" | "hover" | "never";