Scrollbar 滚动条
用于替换浏览器原生滚动条。
基础用法
通过 height
属性设置滚动条高度,若不设置则根据父容器高度自适应。
横向滚动
显示横向滚动条不可设置 height
和 max-height
,当元素宽度大于滚动条宽度时,会显示横向滚动条。
最大高度
当元素高度超过最大高度,才会显示滚动条。
手动滚动
通过使用 setScrollTop
与 setScrollLeft
方法,可以手动控制滚动条滚动。
API
属性
属性名 | 描述 | 类型 | 默认 |
---|---|---|---|
height | 滚动条高度 | string / number | — |
max-height | 滚动条最大高度 | string / number | — |
native | 是否使用原生滚动条样式 | boolean | false |
wrap-style | 包裹容器的自定义样式 | Object | — |
wrap-class | 包裹容器的自定义类名 | string | — |
view-style | 视图的自定义样式 | Object | — |
view-class | 视图的自定义类名 | string | — |
noresize | 不响应容器尺寸变化,如果容器尺寸不会发生变化,最好设置它可以优化性能 | boolean | false |
tag | 视图的元素标签 | string | div |
always | 滚动条总是显示 | boolean | false |
min-size | 滚动条最小尺寸 | number | 20 |
事件
参数 | 说明 | 类型 |
---|---|---|
scroll | 当触发滚动事件时,返回滚动的距离 | function |
插槽
插槽名 | 说明 |
---|---|
default | 自定义默认内容 |
对外暴露的方法
参数 | 说明 | 类型 |
---|---|---|
setScrollTop | 设置滚动条到顶部的距离 | function |
setScrollLeft | 设置滚动条到左边的距离 | function |
wrapRef | 滚动条包裹的 ref 对象 | object |