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.

Guide

The v-infinite-scroll component is a container that allows you to react to a user reaching the end of content area. It is useful when you need to display an unknown but large number of items, and you don’t want to load them all at once.

Props

The v-infinite-scroll component has a number of props that can be used to customize its behaviour.

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.

Item number 1
Item number 2
Item number 3
Item number 4
Item number 5
Item number 6
Item number 7
Item number 8
Item number 9
Item number 10
Item number 11
Item number 12
Item number 13
Item number 14
Item number 15
Item number 16
Item number 17
Item number 18
Item number 19
Item number 20
Item number 21
Item number 22
Item number 23
Item number 24
Item number 25
Item number 26
Item number 27
Item number 28
Item number 29
Item number 30
Item number 31
Item number 32
Item number 33
Item number 34
Item number 35
Item number 36
Item number 37
Item number 38
Item number 39
Item number 40
Item number 41
Item number 42
Item number 43
Item number 44
Item number 45
Item number 46
Item number 47
Item number 48
Item number 49
Item number 50

Direction

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

Item number 1
Item number 2
Item number 3
Item number 4
Item number 5
Item number 6
Item number 7
Item number 8
Item number 9
Item number 10
Item number 11
Item number 12
Item number 13
Item number 14
Item number 15
Item number 16
Item number 17
Item number 18
Item number 19
Item number 20
Item number 21
Item number 22
Item number 23
Item number 24
Item number 25
Item number 26
Item number 27
Item number 28
Item number 29
Item number 30
Item number 31
Item number 32
Item number 33
Item number 34
Item number 35
Item number 36
Item number 37
Item number 38
Item number 39
Item number 40
Item number 41
Item number 42
Item number 43
Item number 44
Item number 45
Item number 46
Item number 47
Item number 48
Item number 49
Item number 50
 

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.

 
Item number 1
Item number 2
Item number 3
Item number 4
Item number 5
Item number 6
Item number 7
Item number 8
Item number 9
Item number 10
Item number 11
Item number 12
Item number 13
Item number 14
Item number 15
Item number 16
Item number 17
Item number 18
Item number 19
Item number 20
Item number 21
Item number 22
Item number 23
Item number 24
Item number 25
Item number 26
Item number 27
Item number 28
Item number 29
Item number 30
Item number 31
Item number 32
Item number 33
Item number 34
Item number 35
Item number 36
Item number 37
Item number 38
Item number 39
Item number 40
Item number 41
Item number 42
Item number 43
Item number 44
Item number 45
Item number 46
Item number 47
Item number 48
Item number 49
Item number 50

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

 
Item number 1
Item number 2
Item number 3
Item number 4
Item number 5
Item number 6
Item number 7
Item number 8
Item number 9
Item number 10
Item number 11
Item number 12
Item number 13
Item number 14
Item number 15
Item number 16
Item number 17
Item number 18
Item number 19
Item number 20
Item number 21
Item number 22
Item number 23
Item number 24
Item number 25
Item number 26
Item number 27
Item number 28
Item number 29
Item number 30
Item number 31
Item number 32
Item number 33
Item number 34
Item number 35
Item number 36
Item number 37
Item number 38
Item number 39
Item number 40
Item number 41
Item number 42
Item number 43
Item number 44
Item number 45
Item number 46
Item number 47
Item number 48
Item number 49
Item number 50
 

Color

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

Item number 1
Item number 2
Item number 3
Item number 4
Item number 5
Item number 6
Item number 7
Item number 8
Item number 9
Item number 10
Item number 11
Item number 12
Item number 13
Item number 14
Item number 15
Item number 16
Item number 17
Item number 18
Item number 19
Item number 20
Item number 21
Item number 22
Item number 23
Item number 24
Item number 25
Item number 26
Item number 27
Item number 28
Item number 29
Item number 30
Item number 31
Item number 32
Item number 33
Item number 34
Item number 35
Item number 36
Item number 37
Item number 38
Item number 39
Item number 40
Item number 41
Item number 42
Item number 43
Item number 44
Item number 45
Item number 46
Item number 47
Item number 48
Item number 49
Item number 50

Loading

You can customize the loading message with the loading slot.

Item number 1
Item number 2
Item number 3
Item number 4
Item number 5
Item number 6
Item number 7
Item number 8
Item number 9
Item number 10
Item number 11
Item number 12
Item number 13
Item number 14
Item number 15
Item number 16
Item number 17
Item number 18
Item number 19
Item number 20
Item number 21
Item number 22
Item number 23
Item number 24
Item number 25
Item number 26
Item number 27
Item number 28
Item number 29
Item number 30
Item number 31
Item number 32
Item number 33
Item number 34
Item number 35
Item number 36
Item number 37
Item number 38
Item number 39
Item number 40
Item number 41
Item number 42
Item number 43
Item number 44
Item number 45
Item number 46
Item number 47
Item number 48
Item number 49
Item number 50
 
This is taking a very long time...

Load more

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

Item number 1
Item number 2
Item number 3
Item number 4
Item number 5
Item number 6
Item number 7
Item number 8
Item number 9
Item number 10
Item number 11
Item number 12
Item number 13
Item number 14
Item number 15
Item number 16
Item number 17
Item number 18
Item number 19
Item number 20
Item number 21
Item number 22
Item number 23
Item number 24
Item number 25
Item number 26
Item number 27
Item number 28
Item number 29
Item number 30
Item number 31
Item number 32
Item number 33
Item number 34
Item number 35
Item number 36
Item number 37
Item number 38
Item number 39
Item number 40
Item number 41
Item number 42
Item number 43
Item number 44
Item number 45
Item number 46
Item number 47
Item number 48
Item number 49
Item number 50

Empty

You can customize the empty message with the empty slot.

Item number 1
Item number 2
Item number 3
Item number 4
Item number 5
Item number 6
Item number 7
Item number 8
Item number 9
Item number 10
Item number 11
Item number 12
Item number 13
Item number 14
Item number 15
Item number 16
Item number 17
Item number 18
Item number 19
Item number 20
Item number 21
Item number 22
Item number 23
Item number 24
Item number 25
Item number 26
Item number 27
Item number 28
Item number 29
Item number 30
Item number 31
Item number 32
Item number 33
Item number 34
Item number 35
Item number 36
Item number 37
Item number 38
Item number 39
Item number 40
Item number 41
Item number 42
Item number 43
Item number 44
Item number 45
Item number 46
Item number 47
Item number 48
Item number 49
Item number 50
 

Error

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

Item number 1
Item number 2
Item number 3
Item number 4
Item number 5
Item number 6
Item number 7
Item number 8
Item number 9
Item number 10
Item number 11
Item number 12
Item number 13
Item number 14
Item number 15
Item number 16
Item number 17
Item number 18
Item number 19
Item number 20
Item number 21
Item number 22
Item number 23
Item number 24
Item number 25
Item number 26
Item number 27
Item number 28
Item number 29
Item number 30
Item number 31
Item number 32
Item number 33
Item number 34
Item number 35
Item number 36
Item number 37
Item number 38
Item number 39
Item number 40
Item number 41
Item number 42
Item number 43
Item number 44
Item number 45
Item number 46
Item number 47
Item number 48
Item number 49
Item number 50
 

Examples

The following are a collection of examples that demonstrate more advanced and real world use of the v-infinite-scroll component.

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.

 
1
2
3
4
5
6
7
8
9
10
11
12
 
CONTENTS

  • Introduction

  • Mode

  • Direction

  • Side

  • Both side

  • Color

  • Loading

  • Load more

  • Empty

  • Error

  • Virtualized infinite scroller