Scroll 滚动条

下方展示了滚动条组件的基本使用

水平滚动

触发方式

你可以设定不同的触发方式，trigger="none" 会让滚动条一直显示，trigger="hover" 会让滚动条在鼠标悬浮的时候显示。

自定义样式

滚动条位置

通过 y-placement 和 x-placement 去控制滚动条的位置。

API

Props

参数	说明	类型	默认值
yPlacement	垂直滚动条位置	'left' | 'right'	'right'
xPlacement	水平滚动条位置	'top' | 'bottom'	'bottom'
scrollable	是否可滚动	boolean	true
useUnifiedContainer	是否使用统一容器	boolean	-
railSize	滚动条大小	number	5
minRailSize	滚动条最小大小	number	20
showXScroll	是否显示水平滚动条	boolean	true
showYScroll	是否显示垂直滚动条	boolean	true
railColor	滚动条颜色	string	'rgba(0, 0, 0, 0.25)'
railHoverColor	滚动条悬停颜色	string	'rgba(0, 0, 0, 0.4)'
trigger	滚动条显示时机	'hover' | 'none'	'hover'
customClass	自定义样式类名	string	''
customRailStyle	自定义滚动条样式	Record<string, any>	{}
customBarStyle	自定义滚动条滑块样式	Record<string, any>	{}
customContainerStyle	自定义容器样式	Record<string, any>	{}
customContentStyle	自定义内容区域样式	Record<string, any>	{}

事件

事件名	说明	回调参数
scroll	滚动时触发	{ scrollLeft: number, scrollTop: number }