Infinite scroll

Bootstrap 5 Infinite scroll

This feature adds a scroll event listener, which is applied to either the window or the component it's attached to (if the component has the overflow property set to scroll in the axis that matches the scroll direction you're using). It calls a callback method each time a user reaches the end of a page or container.

Note: Read the API tab to find all available options and advanced customization

Required ES init: InfiniteScroll *
* UMD autoinits are enabled by default. This means that you don't need to initialize the component manually. However if you are using MDBootstrap ES format then you should pass the required components to the initMDB method.

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
Show code

Direction

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

Angry Dizzy Flushed Grimace Grin
Show code

Spinners and asynchronous data

Show code

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
Show code