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.
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
.
Infinite scroll - API
Usage
Via data attributes
Via JavaScript
Via jQuery
Note: By default, MDB does not include jQuery and you have to add it to the project on your own.
Options
Options can be passed via data attributes, JavaScript, or jQuery. For data attributes, append
the option name to data-mdb-
, as in data-mdb-infinite-direction=""
.
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)
|
getOrCreateInstance
|
Static method which returns the infinite scroll instance associated to a DOM element or create a new one in case it wasn't initialized. |
InfiniteScroll.getOrCreateInstance(infiniteScrollElement)
|
Events
Name | Description |
---|---|
complete.mdb.infiniteScroll
|
This event fires immediately after scrolling to the end of the container. |
Import
MDB UI KIT also works with module bundlers. Use the following code to import this component: