Scroll Area

Augments native scroll functionality for custom, cross-browser styling and supports virtual scrolling for large lists.

Component Features

• Custom scrollbar styling across all browsers.
• Supports vertical, horizontal, or both directions.
• Smooth scrolling support.
• Scroll position and edge detection events.
• Virtual Scrolling support for rendering massive lists efficiently.

Both Directions

Photo by Ornella Binni

Photo by Tom Byrom

Photo by Vladimir Malyavko

Example

Smooth Scroll & Events

Section 1

Section 2

Section 3

Example

With Table

Recent Orders

Invoice	Status	Method	Amount
INV001	Paid	Credit Card	$213.44
INV002	Paid	Credit Card	$784.70
INV003	Paid	Credit Card	$571.80
INV004	Paid	Credit Card	$31.29
INV005	Paid	Credit Card	$333.08
INV006	Paid	Credit Card	$377.41
INV007	Paid	Credit Card	$497.06
INV008	Paid	Credit Card	$816.27
INV009	Paid	Credit Card	$880.06
INV0010	Paid	Credit Card	$275.88
INV0011	Paid	Credit Card	$322.44
INV0012	Paid	Credit Card	$109.19
INV0013	Paid	Credit Card	$551.71
INV0014	Paid	Credit Card	$747.28
INV0015	Paid	Credit Card	$695.92

Example

Infinite Scroll

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

Virtual Scrolling

You can enable virtual scrolling to render lists with thousands of items without performance issues.

Example

API

Props

Name	Type	Default	Description
type	'auto' | 'always' | 'scroll' | 'hover'	'hover'	Describes the nature of scrollbar visibility.
direction	'vertical' | 'horizontal' | 'both'	'vertical'	The direction of the scroll area.
smooth	boolean	false	Enables smooth scrolling behavior.
scrollThreshold	number	0	Distance in pixels from the edge to trigger infinite scroll events.
virtualScroll	boolean	false	Enables virtual scrolling mode.
items	any[]	[]	Array of items to render when virtual scrolling is enabled.
itemHeight	number	40	Fixed height of each item in pixels for virtual scrolling.

Events

Name	Parameters	Description
scroll-position	(position: { x: number; y: number })	Emitted when scrolling occurs, providing current coordinates.
scroll-top	-	Emitted when scrolled to the top edge (considering threshold).
scroll-bottom	-	Emitted when scrolled to the bottom edge (considering threshold).
scroll-left	-	Emitted when scrolled to the left edge (considering threshold).
scroll-right	-	Emitted when scrolled to the right edge (considering threshold).

Slots

Name	Scope	Description
default	-	The main content to be scrolled.
item	{ item: any, index: number }	Custom template for each item in virtual scroll mode.