ScrollArea 滚动区域

扩展原生滚动功能，支持跨浏览器的自定义样式，并提供针对大型列表的虚拟滚动支持。

组件特性

• 跨浏览器的自定义滚动条样式。
• 支持垂直、水平或双向滚动。
• 支持平滑滚动 (smooth scrolling)。
• 提供滚动位置和触边检测事件。
• 虚拟滚动 支持，高效渲染海量数据列表。

双向滚动

Photo by Ornella Binni

Photo by Tom Byrom

Photo by Vladimir Malyavko

Example

平滑滚动与事件

Section 1

Section 2

Section 3

Example

与表格集成

Recent Orders

Invoice	Status	Method	Amount
INV001	Paid	Credit Card	$243.21
INV002	Paid	Credit Card	$939.69
INV003	Paid	Credit Card	$952.51
INV004	Paid	Credit Card	$770.26
INV005	Paid	Credit Card	$217.45
INV006	Paid	Credit Card	$118.02
INV007	Paid	Credit Card	$928.43
INV008	Paid	Credit Card	$928.09
INV009	Paid	Credit Card	$278.38
INV0010	Paid	Credit Card	$564.86
INV0011	Paid	Credit Card	$372.26
INV0012	Paid	Credit Card	$350.59
INV0013	Paid	Credit Card	$880.23
INV0014	Paid	Credit Card	$937.54
INV0015	Paid	Credit Card	$487.65

Example

无限滚动

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

Item 9

Item 10

Item 11

Item 12

Item 13

Item 14

Item 15

Item 16

Item 17

Item 18

Item 19

Item 20

Example

虚拟滚动

启用虚拟滚动，可以毫无性能压力地渲染包含成千上万条数据的列表。

Example

API

属性 (Props)

名称	类型	默认值	说明
type	'auto' | 'always' | 'scroll' | 'hover'	'hover'	描述滚动条的可见性行为。
direction	'vertical' | 'horizontal' | 'both'	'vertical'	滚动区域的方向。
smooth	boolean	false	是否启用平滑滚动行为。
scrollThreshold	number	0	距离边缘多少像素时触发滚动触边事件。
virtualScroll	boolean	false	是否启用虚拟滚动模式。
items	any[]	[]	启用虚拟滚动时需要渲染的数据数组。
itemHeight	number	40	虚拟滚动模式下，每一项的固定高度（像素）。

事件 (Events)

名称	参数	说明
scroll-position	(position: { x: number; y: number })	滚动发生时触发，提供当前滚动的坐标。
scroll-top	-	滚动到顶部边缘时触发（受 threshold 影响）。
scroll-bottom	-	滚动到底部边缘时触发（受 threshold 影响）。
scroll-left	-	滚动到左侧边缘时触发（受 threshold 影响）。
scroll-right	-	滚动到右侧边缘时触发（受 threshold 影响）。

插槽 (Slots)

名称	作用域	说明
default	-	需要滚动的主要内容。
item	{ item: any, index: number }	虚拟滚动模式下，自定义每一项渲染的模板插槽。