Scrollbar 用于绑定已有滚动容器,统一展示页面级滚动条和模块内细滚动条,支持 hover/滚动显示、常显、拖动滑块和点击轨道跳转。
默认样式在 hover 或滚动时展示,用于页面内容区和导航组、列表等紧凑容器。
常显样式通过 API 开启,滑块颜色使用默认 hover 状态,适合需要持续提示滚动位置的区域。
横向滚动条只提供常显样式,且只有一种粗细;用于消息发送添加图片等横向内容溢出的场景。
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| target | 实际滚动的容器元素 | HTMLElement | - | - |
| container | 滑动条挂载容器,通常是 target 的外层定位容器 | HTMLElement | - | target.parentElement |
| hoverTarget | 触发 hover 展示的区域 | HTMLElement | - | container |
| direction | 滑动条方向;横向只提供常显样式,且只有一种粗细 | string | vertical | horizontal | vertical |
| variant | 滑动条样式 | string | page | thin | page |
| top / right / bottom / left | 轨道相对挂载容器的边距,支持函数动态返回 | number | string | function | - | 0 / 4 / 0 / auto |
| minThumbSize | 滑块最小尺寸;纵向为高度,横向为宽度 | number | - | 60(page) / 24(thin) |
| alwaysVisible | 是否常显滑动条;常显时滑块颜色使用默认 hover 状态 | boolean | true | false | false |
| className | 自定义类名 | string | - | '' |