Warning: Use of undefined constant MDB_STRIPE_SUB_WEBHOOK_SECRET - assumed 'MDB_STRIPE_SUB_WEBHOOK_SECRET' (this will throw an Error in a future version of PHP) in /var/www/acc01/wp-content/themes/mdbootstrap4/inc/mdb-subscriptions/mdb-payments/stripe/class-mdb-stripe-webhook.php on line 26

Warning: Use of undefined constant MDB_PAYPAL_WEBHOOK_ID - assumed 'MDB_PAYPAL_WEBHOOK_ID' (this will throw an Error in a future version of PHP) in /var/www/acc01/wp-content/themes/mdbootstrap4/inc/mdb-subscriptions/mdb-payments/paypal/class-mdb-paypal-webhook.php on line 23

Notice: Undefined index: HTTP_REFERER in /var/www/acc01/wp-content/themes/mdbootstrap4/inc/cookie-setter.php on line 8
Bootstrap Infinite scroll - examples & tutorial

Infinite scroll MDB Pro component

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()

      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';