Configuration 

Add Site Settings 

Infinite Scrolling is a frontend extension that does not require a plugin.

To configure the extension, navigate to Site Management -> Sites and add the Infinite Scrolling Site Set to your Site configuration.

Adding the Infinite Scrolling Site Set

Adding the Infinite Scrolling Site Set

Site Settings 

Go to Site Management -> Settings, select your Site configuration, and scroll down to Infinite Scrolling.

Configure the first section of Site Settings

Configure the first section of Site Settings

Include jQuery
Type
boolean
Default
false
Path
infinitescrolling.includeJQueryLibrary

Enable this option to include the jQuery JavaScript library.

Scroll container selector
Type
string
Default
window
Path
infinitescrolling.scrollContainer

Define the scroll container. Use window to bind the scrolling to the browser window, or provide a jQuery selector for a scrollable element.

Sample: window

Item container selector
Type
string
Default
(none)
Path
infinitescrolling.container

Specify the jQuery selector for the container holding all items (e.g., news or events) to paginate.

Sample: div.news-list-container

Item selector
Type
string
Default
(none)
Path
infinitescrolling.item

Specify the jQuery selector for a single item within the list container.

Sample: div.news-list-item

Pagination selector
Type
string
Default
ul.f3-widget-paginator
Path
infinitescrolling.pagination

Define the jQuery selector for the paginator. This selector will hide the paginator in the frontend.

Sample: div.news-list-browse

Next page link selector
Type
string
Default
li.next a
Path
infinitescrolling.next

Define the jQuery selector for the "Next" link in the paginator. The href attribute will be used to load and append the next page’s content.

Sample: div.browseLinksWrap a:eq(-2)

Configure the second section of Site Settings

Configure the second section of Site Settings

Previous page link selector
Type
string
Default
li.previous a
Path
infinitescrolling.previous

Define the jQuery selector for the "Previous" link in the paginator. The href attribute of this element will be used to retrieve items from the previous page. Ensure only one element matches the selector.

Sample: li.previous a

Custom loader icon HTML
Type
string
Default
<div class="ias-spinner" style="text-align: center;"><img src="{src}"/></div>
Path
infinitescrolling.loader.html

Customize the loader icon by specifying your own HTML. Use {src} to include the loader icon path, either the default one or the one set via "Custom loader icon path".

Sample: <div class="ias-spinner" style="text-align: center;"><img src="{src}"/></div>

Custom loader icon path
Type
string
Default
1
Path
infinitescrolling.loader.src

Provide a custom path to a loader icon, e.g. EXT:my_sitepackage/Resources/Public/Icons/spinner.gif. Leave empty to use the default loader icon.

Sample: EXT:my_sitepackage/Resources/Public/Icons/spinner.gif

Loading delay (ms)
Type
int
Default
0
Path
infinitescrolling.delay

Set a delay (in milliseconds) before loading additional items. Increase this value to ensure the loader icon is visible longer.

Sample: 5

Auto-load limit
Type
int
Default
5
Path
infinitescrolling.offset

Define how many times new items should be automatically loaded before displaying a manual "Load More" button. Avoid setting this too high to keep the footer accessible.

Sample: 7

Preload margin (px)
Type
int
Default
200
Path
infinitescrolling.negativeMargin

Set the margin (in pixels) from the last item's bottom edge before the next request starts. A higher value loads items earlier.

Sample: 130