Infinite Scroll

Infinite Scroll - Bootstrap 5 & Material Design 2.0 component

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


                      const element = document.getElementById('basic-example');

                      const content = [
                      'Sad-Tear',
                      'Meh-Blank',
                      'Smile-Wink',
                      'Tired',
                      'Surprise',
                      'Kiss-Beam',
                      'Laugh-Squint',
                      ];

                      const liClasses = ['list-group-item', 'd-flex', 'align-items-center'];
                      const iconClasses = ['far', 'fa-3x', 'me-4'];
                      let i = 0;

                      element.addEventListener('complete.mdb.infiniteScroll', () => {
                        if (i < content.length) {
                          let innerEl = document.createElement('li');

                          let icon=document.createElement('i');

                          liClasses.forEach((item, index)=> {
                            innerEl.classList.add(liClasses[index]);
                          });

                          icon.classList.add(`fa-${content[i].toLowerCase()}`);

                          iconClasses.forEach((item, index) => {
                            icon.classList.add(iconClasses[index]);
                          });

                          innerEl.appendChild(icon);

                          innerEl.innerHTML += content[i];

                          element.appendChild(innerEl);

                          i++;
                        }
                      });

Direction

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

Angry Dizzy Flushed Grimace Grin


                        const element = document.getElementById('direction-example');

                        const content = [
                        'Sad-Tear',
                        'Meh-Blank',
                        'Smile-Wink',
                        'Tired',
                        'Surprise',
                        'Kiss-Beam',
                        'Laugh-Squint',
                        ];

                        const spanClasses = ['list-group-item', 'd-flex', 'align-items-center'];
                        const iconClasses = ['far', 'fa-3x', 'me-4'];
                        let j = 0;

                        element.addEventListener('complete.mdb.infiniteScroll', () => {
                          if (j < content.length) {
                            let innerEl=document.createElement('span');

                            innerEl.classList.add('mx-5');

                            let icon=document.createElement('i');

                            icon.classList.add(`fa-${content[j].toLowerCase()}`);

                            for (let l=0; l < iconClasses.length; l++) {
                              icon.classList.add(iconClasses[l]);
                            }

                            innerEl.appendChild(icon);

                            innerEl.innerHTML += content[j];

                            element.appendChild(innerEl);

                            j++;
                          }
                        });

Spinners and asynchronous data


                        const spinner = document.getElementById('spinner');
                        const imagesContainer = document.getElementById('images');
                        const infiniteContainer = document.getElementById('spinners-and-async-example');

                        const createImg = url => {
                          let imgElement = document.createElement('img');

                          imgElement.classList.add('img-fluid');

                          imgElement.setAttribute('src', url);

                          return imgElement;
                        }

                        const loadImages = () => {
                          spinner.style.display = 'block';

                          fetch('YOUR_API/getNextItem')
                          .then(response => response.json)
                          .then(imgUrl => {
                            spinner.style.display = 'none';
                            imagesContainer.appendChild(createImg(imgUrl));
                          });
                        }

                        infiniteContainer.addEventListener('complete.mdb.infiniteScroll', loadImages);

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.


                        const urls = ['https://mdbootstrap.com/img/Photos/Slides/img%20(102).jpg',
                        'https://mdbootstrap.com/img/Photos/Slides/img%20(103).jpg',
                        'https://mdbootstrap.com/img/Photos/Slides/img%20(104).jpg'];

                        let iterator = 0;

                        new mdb.InfiniteScroll(window);

                        window.addEventListener('complete.mdb.infiniteScroll', e => {
                          if (e.target === window && iterator < urls.length) {
                            const imageElement=document.createElement('img');

                            imageElement.classList.add('img-fluid');

                            imageElement.classList.add('mb-3');

                            imageElement.setAttribute('src', urls[iterator]);

                            document.body.appendChild(imageElement);

                            iterator++;
                          }
                        });

Infinite Scroll - API

Usage

Via data attributes


                    
                      Sample content

Via JavaScript


                    const instance = 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	`instance.toggle()`


                    const infiniteScrollElement = document.getElementById('element');
                    const instance = new mdb.InfiniteScroll(infiniteScrollElement);
                    instance.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', function (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';