数据展示/滑动条

Scrollbar 滑动条

Scrollbar 用于绑定已有滚动容器,统一展示页面级滚动条和模块内细滚动条,支持 hover/滚动显示、常显、拖动滑块和点击轨道跳转。

默认样式

默认样式在 hover 或滚动时展示,用于页面内容区和导航组、列表等紧凑容器。

常显样式

常显样式通过 API 开启,滑块颜色使用默认 hover 状态,适合需要持续提示滚动位置的区域。

横向滚动

横向滚动条只提供常显样式,且只有一种粗细;用于消息发送添加图片等横向内容溢出的场景。

API 参考

参数 说明 类型 可选值 默认值
target实际滚动的容器元素HTMLElement--
container滑动条挂载容器,通常是 target 的外层定位容器HTMLElement-target.parentElement
hoverTarget触发 hover 展示的区域HTMLElement-container
direction滑动条方向;横向只提供常显样式,且只有一种粗细stringvertical | horizontalvertical
variant滑动条样式stringpage | thinpage
top / right / bottom / left轨道相对挂载容器的边距,支持函数动态返回number | string | function-0 / 4 / 0 / auto
minThumbSize滑块最小尺寸;纵向为高度,横向为宽度number-60(page) / 24(thin)
alwaysVisible是否常显滑动条;常显时滑块颜色使用默认 hover 状态booleantrue | falsefalse
className自定义类名string-''