Skip to content

Scrollbar 滚动条 ​

漂亮一点的滚动条

基础用法 ​

通过 height、 width 设置Scrollbar的高度和宽度, 若不设置将会自适应子元素的宽高。

也可以添加 native 属性,表示采用原生滚动条。

横向滚动 ​

当子元素宽度超过Scrollbar宽度时, 就会显示横向滚动条

快速导航 ​

通过 quickJump 可以设置是否在点击滚动条时快速导航到对应位置,此功能默认是开启的

自动监听 ​

当子元素发生改变、父元素大小发生变化时, 滚动条的位置和大小都会自动计算

Scroll API ​

Scroll Props ​

属性名说明可选值默认值
noResizeScrollbar大小是否不再改变,当视口大小不会改变时,添加此项可优化性能Booleanfalse
alwaysScrollbar的滑块是否一直显示Booleanfalse
isOutsideScrollbar的滑块是否显示在Scrollbar容器外面Booleanfalse
quickJump在点击滚动条滑道时,是否导航到对应位置Booleantrue
native是否使用原生滚动条Booleanfalse

Scroll Events ​

事件名说明类型
scroll当触发滚动事件时,返回滚动的距离(scrollLeft:number, scrollTop:number) => void

Scroll Slots ​

名称说明
default默认槽

源代码 ​

组件

贡献者 ​

Released under the MIT License.