Infinite scroll

Vue Bootstrap 5 Infinite scroll

This feature adds a scroll event listener (to the window or the component it's attached to if it has the overflow-y property set to scroll) and calls a callback method every time a user reaches an end of a page/container.

Note: Read the API tab to find all available options and advanced customization

Basic example

Scroll down the container below to add more items.

Note: Your element should be scrollable, for example, it should have overflow-y: scroll property like in the example below.

Direction

Use v-mdb-infinite-scroll:x to change the scrolling direction to horizontall.

Spinners and asynchronous data

Show code

Window

You can apply the mdbInfiniteScroll directive to a window by placing v-mdb-infinite-scroll:window directive to the container of your scrolling elements.

Related resources