Infinite-scroll

shadow

Infinite Scroll allows you to implement dynamic data loading as users scroll through more content. The element allows you to view any content from a selected endpoint without requiring further interaction, such as clicking the "Load more" button or a link to the next page. The component also displays a loader indicator to inform users when new content is being loaded.

Number of items loaded (size)

The size attribute defines the number of items each time new content is loaded.

Card

The Infinite scroll element can be used in combination with any Elements element. For example Card.

Custom data

This example connects infinite scroll to a custom data source instead of a prepared list, which makes it closer to real application usage.

Attributes and Properties

objectName

Description	Dependencies of the InfiniteScroll component.
Attribute	object-name
Type	any
Default	data

Events

Name	Description
wje-infinite-scroll:click-item	Event fired when an item is clicked.
wje-infinite-scroll:start	Emitted when the wje-infinite-scroll:start event is dispatched.
wje-infinite-scroll:load	Emitted when async content finishes loading.
wje-infinite-scroll:finish	Emitted when the wje-infinite-scroll:finish event is dispatched.
wje-infinite-scroll:complete	Emitted when the wje-infinite-scroll:complete event is dispatched.

Methods

loadPages

Description	Loads the pages.
Signature	(page: number) => void

addItem

Description	Adds item to the managed component collection.
Signature	(item: any, place: any) => void

removeItem

Description	Removes item from the current component state.
Signature	(item: any) => void

reset

Description	Resets component state back to its initial values.
Signature	() => void

CSS Shadow Parts

Name	Description
loader	The loader part of the infinite scroll.

CSS Custom Properties

Name	Description
--wje-infinite-scroll-width	Sets the width of the infinite scroll container. his property determines how wide the infinite scroll area will be relative to its parent element. Accepts any valid CSS width value, such as percentages (%), pixels (px), or viewport units (vw). The default value is 100%, which makes it span the full width of its container.
--wje-infinite-scroll-height	Defines the height of the infinite scroll container. This property specifies how tall the infinite scroll area should be. Accepts any valid CSS height value, such as pixels (px), percentages (%), or viewport units (vh). The default value is 300px, providing a fixed height suitable for most use cases.

Slots

Name	Description
default	The default slot for the infinite scroll.