You are viewing the documentation for Vuetify 3
Go to Vuetify 2

Infinite scroller

The v-infinite-scroll component displays a potentially infinite list, by loading more items of the list when scrolling. It supports either vertical or horizontal scrolling.

Usage

When scrolling towards the bottom, new items will be rendered either automatically, or manually with the click of a button.

A load event will be emitted when the component needs to load more content. The argument passed is an object with two properties.

  • side tells you at which side new content should be added, either at the 'start' or 'end'. The return value of the function is a string which describes if the new content was loaded successfully or not.
  • done is a callback function that should be called when the loading of new content is done. It takes a single parameter status that describes if the load was successful or not. See the table below for the possible values.
StatusDescription
'ok'Content was added succesfully
'error'Something went wrong when adding content. This will display the error slot
'empty'There is no more content to fetch. This will display the empty slot
'loading'Content is currently loading. This will display a message that content is loading. This status is only set internally by the component and should not be used with the done function

API

ComponentDescription
v-infinite-scrollPrimary Component

Examples

Props

Mode

The default behaviour of the component is to try to load more content automatically when the scrollbar gets close to the end. However a manual mode is also supported, where the user needs to do some interaction to load the content. By default this a button, but it can be customized with a slot

Direction

The v-infinite-scroll component can be used with either vertical and horizontal scrolling.

Side

By default the v-infinite-scroll component assumes that new content will be appearing at the end of existing content. But it also supports content being added to the start, and content appearing both at the start and the end.

When using the start side for content, the scrolllbar will start at the bottom of the content.

When using both sides for content, the scrollbar will start in the middle of the content.

Color

The default load more button and loading spinner can be colored with the color prop.

Slots

Loading

You can customize the loading message with the loading slot.

Load more

When using manual mode you can customize the action required to load more content with the load-more slot.

Empty

You can customize the empty message with the empty slot.

Error

The error slot is shown if the status 'error' is returned from the done callback.

Misc

Virtualized infinite scroller

If the items in your infinite list are of a uniform size, you can quite easily virtualize the list to only render a small amount of items regardless of how far you scroll in either direction.

Ready for more?

Continue your learning with related content selected by the Team or move between pages by using the navigation links below.
Edit this page onGitHub