Infinite scroll

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


Use data-mdb-infinite-direction to define the scrolling direction.

Angry Dizzy Flushed Grimace Grin

Spinners and asynchronous data


You can apply the mdb.InfiniteScroll instance to a window.

Note: You have to initialize an instance on your own, using JavaScript. If you are using other containers, you have to make a check if your is a window.

View full screen demo

Infinite scroll - API


Via data attributes

      <div class="infinite-scroll" data-mdb-infinite-direction="..." data-mdb-infinite-container="...">
        Sample content

Via JavaScript

      const infiniteScrollInstance = new mdb.InfiniteScroll(document.getElementById('element'), {
        infinite-direction: '...',

Via jQuery

Note: By default, MDB does not include jQuery and you have to add it to the project on your own.



Name Type Default Description
infinite-direction String 'y' Defines an example scroll direction.


Name Description Example
dispose Removes an instance of the lazy element infiniteScrollInstance.toggle()
getInstance Static method which allows you to get the infinite scroll instance associated to a DOM element. InfiniteScroll.getInstance(infiniteScrollElement)

      const infiniteScrollElement = document.getElementById('element');
      const infiniteScrollInstance = new mdb.InfiniteScroll(infiniteScrollElement);


Name Description
complete.mdb.infiniteScroll This event fires immediately after scrolling to the end of the container.

      const infiniteScrollElement = document.getElementById('element');
      infiniteScrollElement.addEventListener('complete.mdb.infiniteScroll', (e) => {
        // do something...


MDB UI KIT also works with module bundlers. Use the following code to import this component:

      import { InfiniteScroll } from 'mdb-ui-kit';