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.

  • Angry
  • Dizzy
  • Flushed
  • Frown
  • Grimace
  • Grin

Direction

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

Angry Dizzy Flushed Grimace Grin

Spinners and asynchronous data


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.

View full screen demo

Infinite scroll - API


Import


        import { mdbInfiniteScroll } from "mdb-vue-ui-kit";
      

Arguments

Argument Description
x Set horizontal scroll direction
window Set scroll parent on window element