Infinite Scroll
Infinite Scroll plugin to automatically add new content to the page.
Projects /
Projects /
Infinite Scroll plugin to automatically add new content to the page.
The Infinite Scroll plugin is used to add dynamic content without the need to load a new page. The loading can be trigger by the scroll of the page or the click on a Load More button (or a combination of the two).
The plugin comes with a list of options that you can use to customize the load behavior.
By default, the loading of new content is triggered by the scroll of the page (infinite scroll). If you want to use a button as trigger, add a data-load-btn='on' to the .js-infinite-scroll element:
<div class="js-infinite-scroll" data-load-btn="on">
<!-- ... -->
</div>If this option is on, the plugin will search for the .js-infinite-scroll__btn element and load new content when user clicks it.
There may be cases where you want some of your content to be loaded on scroll, but then use a button to load the remaining part (user can decide to load more or move forward).
In this case, add a data-load-btn-delay="{n}", where {n} is the number of times you want new content to be loaded while scrolling. You will need to add a data-load-btn="on" for this option to work.
<!-- dynamic content will be loaded 2 times on scrolling, then the 'Load More' button will be used -->
<div class="js-infinite-scroll" data-load-btn="on" data-load-btn-delay="2">
<!-- ... -->
</div>This is the distance below the viewoport that will trigger the load of a new content (defalt is 200px). You change this value adding a data-threshold equal to the new value. You can use either px or %.
<!-- new threshold is 300px -->
<div class="js-infinite-scroll" data-threshold="300px">
<!-- ... -->
</div>
<!-- new threshold is 50% of viewport -->
<div class="js-infinite-scroll" data-threshold="50%">
<!-- ... -->
</div>If you want the url of your page to be updated when new content is loaded, add a data-history="on" (defaut is off).
<div class="js-infinite-scroll" data-history="on">
<!-- ... -->
</div>This is the url of the new page to be loaded.
It could be a comma-separated list of pages to load:
<div class="js-infinite-scroll" data-path="/projects.html, /about.html, /contact.html">
<!-- ... -->
</div>or a single string including {n} for the incremental page number:
<div class="js-infinite-scroll" data-path="/page-{n}.html">
<!-- ... -->
</div>When new content is loaded, the content-loaded event is emitted. You can use this event if you need to perform actions on the new loaded content (e.g., if you need to apply specific JavaScript to the new content).
var infiniteScroll = document.getElementsByClassName('js-infinite-scroll')[0]; // your infinite scroll container
infiniteScroll.addEventListener('content-loaded', function(event){
// new content has been loaded
// event.detail -> url of the file that was loaded
});The data-path attribute is false by default. In this case, the plugin will emit a custom event when new code needs to be loaded so that you can develop your custom load function. More in the Custom Load Function section.
When using a single string for the data-path attribute (e.g., "/page-{n}.html)", the initial value for the {n} variable is zero. You can change this default value using the data-current-page attribute.
For example, if you want your index to start from one (so that the first page to be loaded is page-2), you can add data-current-page="1".
<div class="js-infinite-scroll" data-path="/page-{n}.html" data-current-page="1">
<!-- ... -->
</div>This could be useful also when setting data-history="on". For example, if the user is on page-2, adding data-current-page="2" will make sure the first loaded page is page-3.
The data-container attribute is used to specify the CSS selector of the container of the dynamic content. When not provided, the new content will be appended to the .js-infinite-scroll element.
Additionally, only the content of this element will be loaded from the dynamic page. When not provided, all content will be loaded.
<div class="js-infinite-scroll" data-container=".js-infinite-scroll__content">
<!-- ... -->
</div>If you do not have a static page with your dynamic content (e.g., you need to make a call to a database to retrieve data), you can omit the data-path attribute.
When new content neeeds to be loaded, the plugin will emit the 'load-new' custom event. You can listen to this custom event and load new content. Here's an example:
var infiniteScrollElement = document.getElementsByClassName('js-infinite-scroll');
if(infiniteScrollElement.length > 0 ){
infiniteScrollElement[0].addEventListener('load-new', function(event){
// you need to load new content
// event.detail.index is the index of the page to be loaded (e.g., 1 for the first dynamic load)
});
}Once you have loaded your new content, make sure to emit the 'loaded-new' custom event; the plugin will detect this event and reset the page for new loading. Here's how you can do that:
var event = new CustomEvent('loaded-new', {detail: {path: pathString, checkNext: bool}});
infiniteScrollElement[0].dispatchEvent(event);path is the new url you want to use for the page (set to false if you do not want to update the browser history);checkNext is a boolean variable: set to true if there's still content to be loaded; false otherwise.Even if data-load-btn is off, we do suggest you include the .js-infinite-scroll__btn element ('Load More' button - the plugin will hide it). This button will be announced to Screen Readers and will allow users using the keyboard to load new content (see demo).
When using a custom load function, you can use the moveFocus property of the event.detail to detect whether you need to move the focus to the first loaded element in the new content. This will improve keyboard accessibility.
By default, its value is false (no need to move focus). If the user is navigating using a keyboard, the value will be true: you should move the focus so the user can navigate the new content with their keyboard.
