---
title: "Configuration"
manual: "Infinite Scrolling"
version: "main"
permalink: "https://docs.typo3.org/permalink/jweiland/infinitescrolling:configuration@main"
source: "Configuration/Index.rst"
rendered: "2026-09-25T13:48:36+00:00"
---

# Configuration {#configuration}

## Add Site Settings {#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](../Images/infinite-scroll-assign-site-set.png)

## Site Settings {#configuration-site-settings}

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

![Configure the first section of Site Settings](../Images/infinite-scroll-site-settings-1.png)

-   **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](../Images/infinite-scroll-site-settings-2.png)

-   **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`