-
Get Started
-
Events
-
Router / Navigation
-
Components
- App / Core
- Accordion / Collapsible
- Action Sheet / Actions
- Autocomplete
- Badge
- Block / Content Block
- Button
- Calendar / Datepicker
- Cards
- Checkbox
- Chips / Tags
- Contacts List
- Data Table
- Dialog
- Elevation
- Floating Action Button / FAB
- Form Data / Storage
- Gauge
- Grid / Layout Grid
- Icons
- Infinite Scroll
- Inputs / Form Inputs
- Lazy Load
- Link
- List View
- List Index
- Login Screen
- Messagebar
- Messages
- Navbar
- Notification
- Page
- Panel / Side Panels
- Photo Browser
- Picker
- Popover
- Popup
- Preloader
- Progressbar
- Pull to Refresh
- Radio
- Range Slider
- Searchbar
- Sheet Modal
- Smart Select
- Sortable List
- Statusbar
- Stepper
- Subnavbar
- Swiper
- Swipeout
- Tabs
- Timeline
- Toast
- Toggle
- Toolbar / Tabbar
- Tooltip
- Video Intelligence (vi)
- View / Router
- Virtual List
-
Framework7 Icons
-
Styling
-
Dom7
-
Template7
-
Fast Clicks
-
Utilities
-
Plugins API
-
Lazy Modules
-
Custom Build
Infinite Scroll
Infinite Scroll allows to load additional content or do any other required action when page scroll is near to the bottom.
Infinite Scroll Layout
To enable Infinite Scroll you need to add additional infinite-scroll-content
class to any scrollable container, particularly to our page scrolling area - <div class="page-content">
:
<div class="page">
<div class="page-content infinite-scroll-content infinite-scroll-top">
...
<div class="preloader infinite-scroll-preloader"></div>
</div>
</div>
Where:
-
div class="page-content infinite-scroll-content"
our infinite scroll container -
data-infinite-distance
attribute allows to configure distance from the bottom of page (in px) to trigger infinite scroll event. By default, if not specified, it is 50 (px) -
div class="preloader infinite-scroll-preloader"
preloader with few additional styles to be used with infinite scroll
Infinite Scroll On Top
If you need to use infinite scroll on top of the page (when it scrolled to top), you need to add additional infinite-scroll-top
class to "page-content":
<div class="page">
<div class="page-content infinite-scroll-content infinite-scroll-top">
<div class="preloader infinite-scroll-preloader"></div>
...
</div>
</div>
Infinite Scroll App Methods
There are two App's methods that can be used with infinite scroll container:
app.infiniteScroll.create(el)- add infinite scroll event listener to the specified HTML element
- el - HTMLElement or string (with CSS selector) - infinite scroll container. Required.
app.infiniteScroll.destroy(el)- remove infinite scroll event listener from the specified HTML container
- el - HTMLElement or string (with CSS selector) - infinite scroll container. Required.
Infinite Scroll Events
Infinite Scroll will fire the following DOM events on app instance:
Dom Events
Event | Target | Description |
---|---|---|
infinite | Infinite Scroll container<div class="page-content infinite-scroll-content"> | Event will be triggered when page scroll reaches specified (in data-distance attribute) distance to the bottom. |
App Events
Infinite scroll component emits events on app instance as well as on DOM element.
Event | Target | Arguments | Description |
---|---|---|---|
infinite | app | (el, event) | Event will be triggered when page scroll reaches specified (in data-distance attribute) distance to the bottom. |
Example
<div class="page" data-page="home">
...
<div class="page-content infinite-scroll-content">
<div class="list simple-list">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
<li>Item 11</li>
<li>Item 12</li>
<li>Item 13</li>
<li>Item 14</li>
<li>Item 15</li>
<li>Item 16</li>
<li>Item 17</li>
<li>Item 18</li>
<li>Item 19</li>
<li>Item 20</li>
</ul>
</div>
<div class="preloader infinite-scroll-preloader"></div>
</div>
</div>
var app = new Framework7();
var $$ = Dom7;
// Loading flag
var allowInfinite = true;
// Last loaded index
var lastItemIndex = $$('.list li').length;
// Max items to load
var maxItems = 200;
// Append items per load
var itemsPerLoad = 20;
// Attach 'infinite' event handler
$$('.infinite-scroll-content').on('infinite', function () {
// Exit, if loading in progress
if (!allowInfinite) return;
// Set loading flag
allowInfinite = false;
// Emulate 1s loading
setTimeout(function () {
// Reset loading flag
allowInfinite = true;
if (lastItemIndex >= maxItems) {
// Nothing more to load, detach infinite scroll events to prevent unnecessary loadings
app.infiniteScroll.destroy('.infinite-scroll-content');
// Remove preloader
$$('.infinite-scroll-preloader').remove();
return;
}
// Generate new items HTML
var html = '';
for (var i = lastItemIndex + 1; i <= lastItemIndex + itemsPerLoad; i++) {
html += '<li>Item ' + i + '</li>';
}
// Append new items
$$('.list ul').append(html);
// Update last loaded index
lastItemIndex = $$('.list li').length;
}, 1000);
});