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

Direction

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

Angry Dizzy Flushed Grimace Grin

Spinners and asynchronous data

Window

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 event.target is a window.

View full screen demo

Infinite scroll - API

Usage

Via data attributes


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

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. 


      $('.example-class').infiniteScroll(options);

Options

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

Methods

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);
      infiniteScrollInstance.dispose();

Events

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...
      });

Import

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


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